最佳 Web 中文默认字体
- 景峰 - 岁月如歌最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂. 以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置. 在不同操作系统下,用各个浏览器打开,特别是 Firefox 和 Opera,混乱的世界啊,真真的与浏览器斗,乐趣全无. 虽然沮丧悲情愤,但分析研究的工作还是得继续:.
最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂。以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置。今天做了个更详尽的测试:
http://lifesinger.github.com/lab/2011/default-fonts/
在不同操作系统下,用各个浏览器打开,特别是 Firefox 和 Opera,混乱的世界啊,真真的与浏览器斗,乐趣全无!
虽然沮丧悲情愤,但分析研究的工作还是得继续:
从目前用户反馈的情况来看,在以 12px 大小为主的网页设计中,最佳的中文默认字体方案是:Windows 下用宋体,其他操作系统下用雅黑等无衬线字体。未来随着电脑屏幕的变大和分辨率的提高,当字体的默认大小提高到 14px 以上时,或许所有操作系统下,最佳中文默认字体会统一为雅黑等无衬线字体。
为了让所有网页在尽可能多的情况下,都用最佳中文字体渲染,需要特别考虑以下几点:
可以总结出:
font-family: arial, sans-serif;
无论省略 lang 还是设置为 zh-CN, 在各种环境下都满足预期。
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 补充: