再谈 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. 不推荐省略默认字体族。这就和省略 一样,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; }
欢迎讨论。
建议继续学习:
- Vim(gvim)编程字体推荐 (阅读:6315)
- 介绍“最好的编程字体”Monaco (阅读:6310)
- 等宽字体:程序员的字体 (阅读:4606)
- CSS设置字体大小 (阅读:3804)
- 解决Chrome最小字体限制 (阅读:3036)
- 默认Web字体样式 (阅读:2823)
- 字体文件也属于二进制文件 (阅读:2668)
- Google font api、web font与中文 (阅读:2404)
- 更改 Windows 10 命令行字体 (阅读:2497)
- 三谈 Web 默认字体 (阅读:2199)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:lifesinger 来源: 岁月如歌
- 标签: 字体
- 发布时间:2009-12-17 09:12:55
- [46] IOS安全–浅谈关于IOS加固的几种方法
- [45] 图书馆的世界纪录
- [45] 如何拿下简短的域名
- [45] Oracle MTS模式下 进程地址与会话信
- [43] android 开发入门
- [42] 【社会化设计】自我(self)部分――欢迎区
- [41] 读书笔记-壹百度:百度十年千倍的29条法则
- [41] 界面设计速成
- [39] 视觉调整-设计师 vs. 逻辑
- [35] Go Reflect 性能