最佳 Web 中文默认字体

标签: Programming css font | 发表时间:2011-04-06 11:21 | 作者:lifesinger 景峰
出处:http://lifesinger.wordpress.com

最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂。以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置。今天做了个更详尽的测试:

http://lifesinger.github.com/lab/2011/default-fonts/

在不同操作系统下,用各个浏览器打开,特别是 Firefox 和 Opera,混乱的世界啊,真真的与浏览器斗,乐趣全无!

虽然沮丧悲情愤,但分析研究的工作还是得继续:

  • lang, charset 和 font-family 都会对默认字体产生影响,规律很复杂。
  • 浏览器偏好里的字体设置,对默认字体有直接影响,比如 WebKit 内核的 Chrome 浏览器。
  • 宋体转成 “\5b8b\4f53” 也不能通吃所有浏览器。比如在 Mac OS 的 Chrome 中,只认识 simsun.
  • 宋体其实是 serif 有衬线字体,后面跟 sans-serif, 逻辑上是错的。(修正:并没有规定前面的 font name 要和最后的 general family 保持一致)
  • 不同操作系统下,各个浏览器默认的 sans-serif 中文字体,一般都是最佳选择或用户已调整为最佳,不能强制用户都用宋体。

从目前用户反馈的情况来看,在以 12px 大小为主的网页设计中,最佳的中文默认字体方案是:Windows 下用宋体,其他操作系统下用雅黑等无衬线字体。未来随着电脑屏幕的变大和分辨率的提高,当字体的默认大小提高到 14px 以上时,或许所有操作系统下,最佳中文默认字体会统一为雅黑等无衬线字体。

为了让所有网页在尽可能多的情况下,都用最佳中文字体渲染,需要特别考虑以下几点:

  • 在 Mac Chrome 等环境下,用 font-family: times, sans-serif 时,中文字体并不会根据 sans-serif 渲染,而是会根据 times 的 serif 属性,选择默认的 serif 中文字体来渲染。比如在 Mac Chrome 下,默认 serif 中文字体是很接近宋体的一个字体,比较难看。(修正:实际情况更为复杂,请参考评论中的讨论)
  • 在 Firefox 中,只要 font-family 中有宋体,中文必然就用宋体展现。所以 font-family 中不能有宋体。
  • 当 lang=“zh-CN”, charset=“utf-8” 时,font: arial 在 Mac Firefox 等环境下,默认中文字体是宋体。
  • 在英文 Win7 下,只要 charset=“gbk”, 当 font-family 为 arial, sans-serif 时,默认中文字体是很难看的 Microsoft Sans Serif Regular.(修正:是 fallback 到了韩文字体 Dotum/Gulim(gulim.ttc)来显示,Dotum/Gulim 没有的字符最终会 fallback 到 SimSun,暂时不知道日文字体是否夹在中间。和 Microsoft Sans Serif 没有一点关系。)
  • Opera 是个恐怖的世界,不要尝试分析其规律,最后测试一下就好。

可以总结出:

  1. 如果页面 charset 是 utf-8, 完美的默认字体方案是:
    font-family: arial, sans-serif;
    

    无论省略 lang 还是设置为 zh-CN, 在各种环境下都满足预期。

  2. 如果页面 charset 是 gbk, 推荐默认字体方案为:
    font-family: arial;
    

    Chrome OS 下未测试,根据陈成博客上的反馈,好像会因为没有 sans-serif 而导致中文字体很难看。不过考虑 Chrome OS 还未正式发布,目前可以先忽略。

最后,个人推荐简体中文页面的最佳实践为:

html lang=zh-CN
charset=utf-8
font-family: arial, sans-serif;

测试环境说明:

Mac OS X 10.6.7
Chrome 10.0.648.204
Firefox 4.0
Safari 5.0.4
Opera 11.01

Win7 Ultimate
IE 9.0.8080.16413

2011-04-09 补充:

  1. 关于字体的默认大小和行高等信息,推荐秦歌的博文:默认 Web 字体样式
  2. 关于字体的 fallback 等文本渲染信息,推荐排版达人 jjgod 的博文:浏览器如何渲染文本

相关 [web 中文 字体] 推荐:

最佳 Web 中文默认字体

- 景峰 - 岁月如歌
最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂. 以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置. 在不同操作系统下,用各个浏览器打开,特别是 Firefox 和 Opera,混乱的世界啊,真真的与浏览器斗,乐趣全无. 虽然沮丧悲情愤,但分析研究的工作还是得继续:.

默认Web字体样式

- Ashaum - 随网之舞
通常用户看到的页面的样式会受到三层控制,第一层是浏览器的默认样式,第二层是网页定义样式,第三层是用户自定义样式. 和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高. 实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能,但是极少数会有用户去自定义,一般用也是高级用户.

Web开发中的字体设置

- - 标点符
网上找了下,目前应该还没有系统整理过如何设置Web开发中的字体,更多的Web开发人员在进行字体设置的时候也没有深究该如何更加合理的设置字体. 在Web开发中,CSS默认应用的Web字体是有限的(需要考虑到用户的电脑上是否也安装了此字体),虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.

闲侃中文字体

- Yuheng Kuang - 比目鱼博客
1.在平面设计中,“字体”是一项重要的基本功. White 在《平面设计原理》一书中写道:“组成 typography(排印)这个词的词根是 typo (文字)和 graphy (绘画),因此,它的字面意思就是用文字绘画. ” 2.英文字体数量繁多,让人眼花缭乱. 相比之下中文字体的数量非常有限. 原因很容易理解:英文字母少,汉字字数多.

Kindle 4 Root后更换中文字体

- GaRY - Page to Page
编者按:Mobileread论坛的高手门已经Root了Kindle4(非触摸屏),从而使更换字体变成可能,不过操作步骤偏技术了一些,相信不久就会有更简单的越狱方案出来. 如果你不理解你在做什么,请不要继续. 打开 kindle 4/4.0.1 的ssh登录:. 1)从settings菜单中找到你的serial number.

中文字体网页开发指南

- - 阮一峰的网络日志
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比 英文字体,中文字体的网页开发有着极大的局限性. 因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体. (*注:确实有 网站提供中文字体的web服务,从技术角度,我认为这样做不可取.

Chrome Dev 升级到 16.0.899.0,修复中文字体渲染问题

- Eric - 谷奥——探寻谷歌的奥秘
感谢读者 Happy Lun 和 cnliuyong 的提醒. Chrome Dev分支for Mac/Windows/Linux和Chrome Frame升级到了16.0.899.0,主要更新:. Javascript V8引擎升级到3.6.4.1. FTP修复跟ftp.comconlink.co.za的兼容性问题.

Chrome Web Store 多国语言版上线,中文版命名“Chrome 网上应用店”

- hao - Chrome迷
今天 Google 悄悄推出了多国语言版本的 Chrome Web Store (此前的官方扩展中心会自动跳转到 Chrome Web Store),一共44种语言,当然简体中文版的“Chrome网上应用店”也在列. 估计这一变动将成为下周 Google I/O 上的一个炒作点,但是鉴于我镇经常都不能访问 Chrome Web Store,推出简体中文版的意义似乎也不是太大.

Sencha Touch 2 官方指南中文翻译系列 — 来自移动Web开发社区

- - ITeye论坛最新讨论
Sencha Touch 2是一个HTML5移动Web开发框架,是基于ExtJS4核心类库在移动设备的扩展,针对移动设备提供良好的触摸屏操控体验. 在 @范凯robbin微博上看到ITEye在2012年要重点发展移动技术领域,作为JavaEye(请原谅我用这个名字,亲切啊)的老粉丝特贡献一下资料.

Web未死

- Sinan - GeekPark 捕风捉影
App的极限已经浮现,而Web则是突破此极限,推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死,互联网永生》这篇文章还不到一年的时间,业界为Web平反的声音渐起. 2010年1月,苹果发布iPad,紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式,App可谓如日中天.