三谈 Web 默认字体
最近疯狂测试 reset.css, 第一个首要测试点就是默认字体。前不久秦歌的帖子和我的再谈,收到了很多朋友的反馈。重新整理了下,请先仔细查看测试页面:
1. Tahoma 字体的问题,小麦总结过。在 IE6 下,Arial 字体在下划线的显示上的确略有优势,甚至有神奇的魔数 1.231 来让中英文对齐。但除了 IE6, 其它浏览器下,Arial 表现并不好。考虑门户网站的设计趋势,链接加下划线的形式,已逐步去掉,比如 YAHOO 首页。国内腾讯首页也早就去掉了满屏的下划线,目前只有新浪、搜狐等站点依旧满屏下划线。考虑 IE6 的占有率正逐步降低以及面向未来编程,坚持用 Arial 优势不大。
2. 在再谈中,考虑渐进增强,把 Helvetica 放在首位。后来仔细测试发现,如果系统中没有安装 Helvetica 字体,font-family: helvetica,tahoma,arial; 的写法,会直接无视 Tahoma. 具体请看上面的测试页面。这个 bug 是致命的,不得不忍痛割爱,去掉 Helvetica.
3. 宋体的问题不多说。记住:只要 Opera 存在且有一定市场占有率,就别用 SimSun 这种写法。
4. 行高的问题。再谈里提到 1.5 会导致一些诡异 bug(主要是垂直居中对齐,需要重置行高为 1)。和同事讨论后,觉得与 line-height: 1 带来的风险相比,还是 1.5 让人放心。
5. GB 编码问题。font: 12px sans-serif; 不设置宋体,页面为 GB 系列编码时,非中文操作系统下(港台用户中有不少英文系统,还有海外华人),IE 的默认字体是 Microsoft Sans Serif Regular, 很难看。截图为证:

有两个解决方案:a. 用”宋体”垫底;b. 不加 sans-serif.
6. 宋体用 \5b8b\4f53 表示是为了避免文件编码不一致时带来的问题。
综上,我们可以得到 Web 默认中文字体的最佳方案:
理想主义者方案 A(所有页面用 utf-8 编码)
font: 12px/1.5 tahoma, arial, sans-serif;
理想主义者方案 B(有 gb 编码的页面)
font: 12px/1.5 tahoma, arial, simsun, sans-serif;
现实主义者方案 A
font: 12px/1.5 tahoma, arial;
现实主义者方案 B
font: 12px/1.5 arial;
可用性主义者方案:
font-family: verdana, arial, sans-serif;
2009-12-04 补充:经朋友提醒,Opera 下的默认中文字体就是宋体,因此只要宋体后无其它中文字体,用 simsun 是没问题的。上面的最佳方案做了相应调整。

December 3rd, 2009 on 23:58
从Twitter过来,竟然是沙发!
December 4th, 2009 on 0:00
期待4谈,期待完美主义者方案
December 4th, 2009 on 8:19
不错,tahoma的下划线问题的确是个恶心事儿啊。
December 4th, 2009 on 8:27
追求完美的精神,值得我们学习。
另外tahoma在IE8标准模式(windows server 2008)中显示不如IE7模式好看。
December 4th, 2009 on 8:40
不得不佩服专业研究精神~ ^ ^
December 4th, 2009 on 9:44
Verdana实在是很好看,貌似做企业、外贸之类的小网站,让Verdana做为主打字体最好?
至少目前在下还没发现什么问题。
December 4th, 2009 on 9:54
@6楼:可以看这篇文章:
…Verdana太宽了,不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。国外设计师喜欢用Verdana, 很多时候是因为Verdana 11px以下的小字效果的确十分理想,但是国内很多设计师想也不想就照搬过来,并用在12px 乃至14px的布局上,导致本来就局促的空间更显紧张,所以不推荐作为font-family 打头阵的字体。
December 4th, 2009 on 10:35
Chrome英文如何设置10px字体大小,无论怎么设置都只能显示12px?
Chrome英文如何设置10px字体大小,无论怎么设置都只能显示12px
px,pt,em各种都试过,但是在chrome里面就是无法显示小于 12px的英文字体
IE, FireFox, Safari下都没问题,是不是Chrome不支持12px以下的字体,或者有什么其它hack办法?
December 4th, 2009 on 11:14
来到这里才发现自己一直在流浪,这里的营养真多……
December 4th, 2009 on 13:12
不是完美,都有侧重。
佩服。
December 4th, 2009 on 13:27
windows 下有一套映射缺失字体的机制,helvetica 会自动映射到 arial,可以在注册表里面找到这些东西:
HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes
December 4th, 2009 on 15:08
看来old9找到了问题根源。顶!
December 6th, 2009 on 18:55
无所谓了 啊!!!!!
December 8th, 2009 on 13:23
嘿嘿 支持一下
December 9th, 2009 on 9:34
看来这个问题得去测试下,之前没注意过这个问题。
@金冈 chrome中文版的话,怎么设置都是12px,这个我也弄了好久都没解决,chrome英文版的话就没这个问题。
December 13th, 2009 on 23:28
@old9 原来如此~ :)
December 13th, 2009 on 23:38
专业精神背后的努力与勤奋值得学习,佩服~
December 14th, 2009 on 14:16
其实总结这些,之后会发现Arial还是比较好的选择。毕竟Arial字体的安装率超96%。
December 16th, 2009 on 23:18
ff3.5 貌似没有下划线粘贴问题
December 22nd, 2009 on 17:40
@chisdy
貌似chrome某个版本之后就最小12px了吧
你的英文版的chrome版本是多少…
December 28th, 2009 on 15:28
font: 12px/1 Tahoma, Helvetica, Arial, “\5b8b\4f53″, sans-serif;
这个写法应该也是不妥吧,假如系统没有Tahoma和Helvetica,就会忽略后面所有字体,直接使用默认字体。
December 30th, 2009 on 13:33
由于几种方案首选字体在各浏览器中对半角空格的宽度解释是不一致的,因而造成了各浏览器的行内字数不一致,进而行数也不一致。而且,对英文字体对字符” · “的解释也是不一样的。
首选宋体不会出现上述问题。但是,宋体对英文的美观度,对©的效果都不是很好。
宋体在IE6下会被切头;
各种字体在各浏览器中纵比,行高的解释也是不同的;
其它。
无解。
January 7th, 2010 on 9:56
simsun还是加上吧,
在日文Windows下,因为浏览器默认字体不是宋体,没有simsun的字体方案,
字体会比较难看。
January 14th, 2010 on 14:02
文章不错,顺便说一下,看以下棕熊的字体介绍,感觉也不错
January 15th, 2010 on 10:01
tahoma的13px在ie6 下显示成14px,我感觉首选tahoma不怎么样。。。
January 21st, 2010 on 17:15
谷歌浏览器Chrome无法显示小于12px是浏览器的问题。
解决的方式是在浏览器中加入下面代码。
路径:“Documents and Settings\ 你的用户名 \Local Settings\ Application Data \Google\ Chrome\ User Data \Default\”
中用记事本打开Preferences文件。在”webkit”的”webprefs”里面加多这两行:
“minimum_font_size”: 8,
“minimum_logical_font_siz”: 12,
第一行:最小字体大小。
第二行:最小逻辑字体大小。这个逻辑字号我也太明白,是否就是显示逻辑符号的大小,我没有具体测验过。有兴趣的可以测试一下。(在webkit中有这样的一句“The minimum logical font size used to display text”用于显示文本的最小逻辑字体大小)
当然你可以把最小的8改为6,那就可以显示6像素的字体了。不过相信6像素的字已经看不清楚了。
修改后我的为:
“webkit”: {
“webprefs”: {
“default_fixed_font_size”: 13,
“default_font_size”: 16,
“fixed_font_family”: “\u65B0\u5B8B\u4F53″,
“inspector_settings”: “lastActivePanel:string:elements\n”,
“minimum_font_size”: 8,
“minimum_logical_font_siz”: 12,
“sansserif_font_family”: “Simsun”,
“serif_font_family”: “Simsun”
}
}
March 16th, 2010 on 10:18
safari 4,以上任何字体都完美显示。
August 4th, 2010 on 15:10
听说这里很是强大,前来膜拜。
leave a reply