IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

再谈 Web 默认字体

岁月如歌 2009-12-17 09:12:55 累计浏览 3,253 次
本机暂存

    秦歌这篇文章总结得很不错,俺挑刺来啦:

    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; }

    欢迎讨论。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 程序员技术练级攻略 (累计阅读 35,472)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  4. 各公司对前端开发的职位描述 (累计阅读 10,405)
  5. iframe大小自适应 (累计阅读 10,057)
  6. Hello! 404 (累计阅读 9,385)
  7. 浏览器的渲染原理简介 (累计阅读 8,377)
  8. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  9. 优雅绝妙的Javascript跨域问题解决方案 (累计阅读 8,067)
  10. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)