再谈 Web 默认字体
秦歌这篇文章总结得很不错,俺挑刺来啦:
1. 优先级的描述不严谨,有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。
2. Tahoma 字体从 Win95 就有了,并且从 Win2000 开始,Tahoma 成为 Win 英文系统的默认字体。2007 年,在 Mac OS X v10.5 (Leopard) 中也开始内置 Tahoma 字体。至今,普及性还是相当不错的。
3. Google, YAHOO 等网站,首选 Arial, 个人觉得是出于兼容性考虑。Google 需要考虑到对各种设备的支持,这就和 Google 首页继续采用 table 布局一样,table 布局可以保证在尽可能多的用户终端中正确显示。Arial 字体同理。
4. 但这并不代表 Google 等页面的做法就是最好的。从渐进增强角度讲,font-family: Tahoma, Helvetica, Arial, sans-serif; 可以达到优雅降级的目的。在更好的用户代理中,显示更好的字体,同时用 Arial 殿后,也能保证在尽可能多终端设备中正确显示。渐进增强无处不在,需要我们的共同努力和推广。(注:考虑 Mac 用户,Leopard 中内置了 Tahoma 字体,因此 font-family: Helvetica, Tahoma, Arial, sans-serif; 会更渐进增强一些)
5. 不推荐省略默认字体族。这就和省略 </body> 一样,99.99% 的情况下不会导致问题,并且是一种优化手段。但除了特殊页面(比如 Google 首页),普通页面普通流量下,节省这一点字符,不利于 Web 标准的整体进步。
6. 不设置宋体,在 GBK 编码时,英文操作系统下,IE 的默认字体是 Microsoft Sans Serif Regular. (注:不设置 sans-serif 可以避免此问题,但考虑上面第 5 条,依旧推荐前面加“宋体”来解决该问题)
7. 根据可用性大师 Jackob Nielsen 的调查,在目前计算机显示器的 dpi 下,无衬线字体比有衬线字体更易读。用户调研显示,Verdana 字体是易读性最高的,推荐设置为第一默认字体。这一点,可以参考 ALA 的字体设置,阅读起来的确很舒服。
8. Tahoma 字体的问题是,斜体时,特别是小号时,文字不易阅读,还有就是小麦总结过的下划线问题。Verdana 字体的问题是,字号相同时,比其它字体显示偏大偏宽,这导致混排时效果不佳。考虑中文网页中,一般很少用斜体,因此 Tahoma 依旧是首选。
9. 关于默认行高,对于博客等以大段文字为主的应用来说,1.5 是个很不错的选择。但对于淘宝的大部分页面来说,1.5 会导致 li, hx, div 等所有元素的默认行高都是 1.5, 这会给实际工作带来不少重置工作量和某些诡异 bug(小虎 & 有脚,赶快总结哦)。我更倾向于 body { line-height: 1; } p { line-height: 1.5; }
10. 字体对性能和效率的影响,可以忽略。有时候,勿以善小而为之。97% 的情况下,不成熟的优化是万恶之源。
11. 未来:若干年后,随着显示器 dpi 的提高,网页默认字体很可能会和传统印刷业的推荐字体一致 —— 采用衬线字体。等以后再说了。
最后,我的推荐是:
body { font: 12px/1 Helvetica, Tahoma, Arial, \5b8b\4f53, sans-serif; }
p { line-height: 1.5; }
欢迎讨论。

November 23rd, 2009 on 10:02
沙发。
November 23rd, 2009 on 10:09
我的建议是body不要设置行高…
November 23rd, 2009 on 10:12
真是好经验
November 23rd, 2009 on 10:13
行高1.5 最典型的影响就是对那些高度小于默认字体大小的按钮(eg. 关闭、添加、删除之类)ie6下容器的高度会被行高影响而偏大
November 23rd, 2009 on 10:26
嗯,这篇文章对我胃口,就喜欢这种挑刺的,不少细节我需要再求证一下哈。
1、默认行高问题,我们的观点是一致的,依据实际情况来设置,但是设置为1是不合适的,因为这种情况下极易出现显示不全。你可以设置一个最小行高,这是需要的。
2、众多知名网站选用Arial可以说由于兼容性,这正是需要考虑的,其可读性和美观性肯定是一个重要的标准,在我们绝大部分是中文的网站,直接采用Arial是可以接受的。这也是为啥我压根没有讨论Verdana的原因。其实,这个地方也可以用高纳德的话来说一说。
3、“不设置宋体,在 GBK 编码时,英文操作系统下,IE 的默认字体是 Microsoft Sans Serif Regular.”这个问题需要再测试一下,我猜想IE的默认设置和CSS的默认设置效果是否一样。 百度的页面是GB2312,字体使用的是arial,不说起好坏,一定是一个绝佳的测试案例。
4、默认字体样式,被重复的大量的使用,每个页面都在使用,是不是97%还需要斟酌。这个都是权衡的问题了。
November 23rd, 2009 on 11:32
恩,看过这篇文字章和推荐的文章,收获颇大!谢谢你们分享!!
November 23rd, 2009 on 13:17
1、最小行高的观点,我同意秦歌的,至少应设到1.5吧。
2、Tahoma的确有他的优点,但是以前看过有文章推荐font-family:HelveticaNeue-Light,Helvetica,Tahoma,Arial,sans-serif; 的写法。
3、补充:优先级的描述也还要考虑到优先级加权的情况。
November 23rd, 2009 on 16:11
“,但是设置为1是不合适的,因为这种情况下极易出现显示不全。”
我遇到过这种情况。还是1.5好点。
期待关于“行高1.5的诡异bug”
November 23rd, 2009 on 19:56
进来学习了一下
November 23rd, 2009 on 21:12
第10条把我从另外一个坑里拉出来了。感谢秦歌玉伯分享~
November 23rd, 2009 on 23:39
从射雕到秦歌再到里面的链接一个个斟酌过来,晚上吃泡面的时间都没有了,学习了!
November 24th, 2009 on 13:16
行高问题在以ie为内核的非ie浏览器下特别明显,比如maxthon,不同版本的解释不同,我测试过12px下行高最少要1.3才能显示完整,所以直接设置1.5了,1的话问题不少。
但是1.5,在不同浏览器下解析也不是一样,包括ff op safari chrome什么的,感觉上下边距会有差异,特别是和图片混排,比如一个16*16的图和一行16的文字在同一排。
November 27th, 2009 on 11:47
Tahoma 下划线问题,就目前而言还是很致命的,偶个人还是比较的推崇Arial,并且偶个人也一直认为Arial是相当漂亮的。
不过,在链接默认不设置下划线的情况下可以考虑将Tahoma 设为首选。
December 2nd, 2009 on 12:19
学习一下
December 18th, 2009 on 0:19
收藏了,谢谢分享
January 28th, 2010 on 16:19
什么是衬线字体?!
转载了!
February 2nd, 2010 on 8:37
喜欢最后的推荐
March 4th, 2010 on 15:37
这有意思么……
leave a reply