字体的选择,是网页开发的关键因素之一。
合适的字体,对网页的美观度(或可读性)有着举足轻重的影响。
但是,相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做。)
不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈现字体效果。
下面是目前中文字体的最佳实践,主要参考了Kendra Schaefer的文章。
一、操作系统的预装字体
操作系统决定了开发者可以使用的字体。所以,第一步,我们必须了解操作系统到底提供哪些字体。
Windows操作系统:
- 黑体:SimHei
- 宋体:SimSun
- 新宋体:NSimSun
- 仿宋:FangSong
- 楷体:KaiTi
- 仿宋GB2312:FangSongGB2312
- 楷体GB2312:KaiTiGB2312
- 微软雅黑:Microsoft YaHei (Windows 7开始提供)
OS X操作系统:
- 冬青黑体: Hiragino Sans GB (SNOW LEOPARD开始提供)
- 华文细黑:STHeiti Light (又名STXihei)
- 华文黑体:STHeiti
- 华文楷体:STKaiti
- 华文宋体:STSong
- 华文仿宋:STFangsong
如果用户装了MicroSoft Office,还会多出一些字体。
- 隶书:LiSu
- 幼圆:YouYuan
- 华文细黑:STXihei
- 华文楷体:STKaiti
- 华文宋体:STSong
- 华文中宋:STZhongsong
- 华文仿宋:STFangsong
- 方正舒体:FZShuTi
- 方正姚体:FZYaoti
- 华文彩云:STCaiyun
- 华文琥珀:STHupo
- 华文隶书:STLiti
- 华文行楷:STXingkai
- 华文新魏:STXinwei
二、font-family命令
CSS的font-family命令,指定了网页元素所使用的字体。下面是一个例子。
font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;
它的规则有三条。
(1)优先使用排在前面的字体。
(2)如果找不到该种字体,或者该种字体不包括所要渲染的文字,则使用下一种字体。
(3)如果所列出的字体,都无法满足需要,则让操作系统自行决定使用哪种字体。
根据这些规则,font-family应该优先指定英文字体,然后再指定中文字体。否则,中文字体所包含的英文字母,会取代英文字体,这往往很丑陋。
上面图片中,红框内的英文字母,左边采用英文字体渲染,右边采用中文字体渲染,哪一种效果比较好,一目了然。
为了保证兼容性,中文字体的中文名称和英文名称,应该都写入font-family。比如,"微软雅黑"的英文名称是Microsoft YaHei。
此外,中文字体的中文名称,以及由多个单词组成的英文名称,应该放在双引号内。
三、 Windows平台和Mac平台
由于Windows和Mac的中文字体没有交叉,所以应该同时为两个平台指定字体。
常见的做法是,Windows平台指定"微软雅黑"(Microsoft YaHei),Mac平台指定"华文细黑"(STXihei)。
四、衬线体和无衬线体
所谓"衬线体"(Serif),指的是笔画的末端带有衬线的字体。
就像英文字体一样,中文字体也可以分成"衬线体"和"无衬线体"(San-serif)。比如,对于繁体字来说,微软正黑(Microsoft JhengHei)是无衬线体,新细明体(PMingLiU)是衬线体。
对于简体字来说,微软雅黑(Microsoft yahei)是无衬线体,宋体(SimSun)是衬线体。
一般来说,衬线体装饰性强,往往用于标题;无衬线体清晰度好,往往用于正文。
五、几种常见中文字体
(1)宋体(SimSun)
宋体是最常见的中文字体,如果没有指定字体,操作系统往往选择它来渲染。很多人认为,这种字体并不美观。
(2)微软雅黑(Microsoft YaHei)
微软雅黑的美观度和清晰度都较好,可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑(STXihei)。
但是,Windows XP没有预装这种字体,这时可以选择黑体(Simhei)替代。不过,黑体比较粗,不应用于字号较小的文字。
(3)仿宋(FangSong)
这种字体是衬线体,比宋体的装饰性更强。如果字号太小,会影响清晰度,所以只有在字号大于14px的情况下,才可以考虑这种字体。
它在Mac平台的对应字体是"华文仿宋"(STFangsong)。
(4)楷体(KaiTi)
楷体也是衬线体,装饰性与仿宋体接近,但是宽度更大,笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。
它在Mac平台的对应字体是"华文楷体"(STKaiti)。
(完)
taow 说:
错字:
"微软雅虎"的英文名称是Microsoft YaHei
2014年7月15日 09:18 | # | 引用
任春晓 说:
比如,"微软雅虎"的英文名称是Microsoft YaHei。 这个地方应该是微软雅黑吧,阮老师。
2014年7月15日 09:20 | # | 引用
十二能 说:
经常做网页开发,mac的字体很好看。
2014年7月15日 09:20 | # | 引用
独自流浪 说:
bug report
文中“微软雅黑”写成了“微软雅虎”
2014年7月15日 09:27 | # | 引用
阮一峰 说:
@taow,@任春晓:
谢谢指出,已经改过来了。
2014年7月15日 09:48 | # | 引用
shizhao 说:
字体的中文名都是别名,没必要声明吧
2014年7月15日 09:50 | # | 引用
but 说:
中文的 web font,為什麼技術上不可取?
Web font 應該是確保訪客在各種 OS 都能看到一致效果的理想解決方案?
2014年7月15日 10:00 | # | 引用
cc 说:
我觉得是,国内网络环境堪忧,还要考虑到字体版权问题
2014年7月15日 10:42 | # | 引用
pkuphy 说:
或许是因为中文字体文件太大,下载比较慢吧。
2014年7月15日 10:46 | # | 引用
chunghe 说:
請問這篇文章的原文出處是這篇嗎?
http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/
2014年7月15日 11:07 | # | 引用
imcaspar 说:
2014年7月15日 11:30 | # | 引用
zxcasdqwe9 说:
一般来说,衬线体装饰性强,往往用于标题;无衬线体清晰度好,往往用于正文。
笔误吗?正好反了。
2014年7月15日 11:44 | # | 引用
sacho 说:
Mac 平台上,冬青黑的设计质量还是高于华文黑的,建议优先冬青黑。
2014年7月15日 11:49 | # | 引用
Justice 说:
不给原文地址,似乎相当不妥吧。
还有讲雅黑时候说「但是,Windows XP没有预装这种字体,这时操作系统往往会选择黑体(Simhei)取代。」,这也完全没这回事吧。
2014年7月15日 11:54 | # | 引用
Justice 说:
忽略我上一条评论第一句,给了出处了,抱歉。不过这篇文章有点老了,有些说法已经过时了,比如 Web font 的问题,中文领域也有了新的进展。
2014年7月15日 11:58 | # | 引用
John 说:
justfont的webfont对字符集是做了优化的,并不需要全部加载来着...
然后版权问题的话...justfont不就是卖字体的么= =
2014年7月15日 12:36 | # | 引用
倪焱石 说:
没有介绍手机浏览器上的字体啊。
2014年7月15日 17:49 | # | 引用
autoxbc 说:
其实网页开发者搞这么细致是过度优化,简单的写上 serif ,sans-serif ,monospace 就可以了,具体衬线非衬线映射到什么字体让浏览器去管理。
2014年7月15日 17:59 | # | 引用
ian 说:
有点矫枉过正的感觉。Mobile First的字体才应该是优先考虑的吧
2014年7月16日 10:22 | # | 引用
kingbird 说:
一个地方不对
微软雅黑:Microsoft YaHei (Windows 7开始提供)
其实windows vista时代已经提供了,最早是在vista系统里出现的
另外有一个建议
font-family后面的值最好全部写英文,中文的话在mac下某些版本的浏览器是不支持的,认不出来,还有比"Microsoft YaHei"这种英文写法,更推荐的写法是把汉字转义为unicode,比如微软雅黑转义之后就是"\5FAE\8F6F\96C5\9ED1",这样能兼容更多平台和各种不同语言的浏览器,兼容性最好。
2014年7月16日 11:32 | # | 引用
simplejoy 说:
不错的关于web网页字体分享。移动端app里面的字体呢,有什么讲究没
2014年7月16日 11:40 | # | 引用
hxgdzyuyi 说:
jusfont 肯定是没问题的。
2014年7月17日 10:30 | # | 引用
linuo 说:
1.支持阮兄;2.测试阮兄的评论功能
2014年7月17日 17:28 | # | 引用
84zhu 说:
其实最好用unicode来表示,比如“微软雅黑”写成“\5FAE\8F6F\96C5\9ED1”,就不必写2个,更不必谢英文的“Microsoft YaHei”
2014年7月19日 10:18 | # | 引用
AlexZou 说:
思源黑体的诞生让网页开发的中文字体有救了。
2014年7月21日 12:26 | # | 引用
zeroten 说:
用户都没有安装这个字体,怎么用?
2014年7月23日 14:03 | # | 引用
Nakayamaqs 说:
思源黑体的诞生让网页开发的中文字体有救了。
同意,但是字体种类不够多啊。好像都是无衬线?2014年7月24日 14:35 | # | 引用
海光牛牛 说:
截图来自于上一版本土豆网,嘿嘿!
2014年7月26日 18:36 | # | 引用
海农 说:
很好的建议,我也一直这么干
2014年7月30日 12:08 | # | 引用
利明 说:
老师您文章开头的图片可是吊足了我的胃口
2014年8月 2日 01:12 | # | 引用
超級efly 说:
支持一下~~請問font-family中帶有「""」引號的字體和不帶有的有什麼區別?
2014年8月 3日 11:48 | # | 引用
摩摩诘 说:
在font-family中同时指定中文和英文名称的目的是什么,能请明确的讲一讲吗?另,这个博客的所有字体几乎都是Serif,好像完全没有实践这篇文章中的方法论啊...
2014年8月 9日 22:04 | # | 引用
马克屋 说:
我做的个人博客,用的是微软雅黑字体,但是在XP下系统却不提供这样的字体,导致在XP下感觉页面好丑,不知道有没有什么好的办法解决。
2014年8月11日 11:27 | # | 引用
Finle 说:
外行人说:分析的很到位,浅显易懂!
2014年8月11日 23:25 | # | 引用
牛三金 说:
没看够,有点尝浅即止的感觉。
2014年8月14日 00:11 | # | 引用
蓝色 说:
几天就会来你网站看一看,内容很好,可惜更新速度不快。呵呵
2014年8月14日 23:58 | # | 引用
王吴 说:
请问,http://javascript.ruanyifeng.com/library/modernizr.html
像这里面代码highlight,其中代码是用的什么工具解析分割成html的呢?
2014年8月19日 11:43 | # | 引用
李博 说:
博主的帖子里字体显示有bug,就是引用部分“大框框”里的字体,其它地方没事。
浏览器: Chrome 35.0.1916.153 m
2014年8月19日 17:03 | # | 引用
外汇客 说:
博主的帖子里字体显示有bug,就是引用部分“大框框”里的字体,其它地方没事。
2014年8月20日 10:34 | # | 引用
php程序员 说:
喜欢使用 微软雅黑,字体比较柔和。
2014年8月21日 16:30 | # | 引用
AoE5 说:
采用字体子集的方式处理,中文webfont还是能接受的。固定文字的地方采用webfont,保持兼容性,子集eot、ttf、woff、svg加起来也很小。
2014年8月27日 10:21 | # | 引用
ARM Linux 说:
中文字体开发还是需要耐心啊
2014年8月27日 12:02 | # | 引用
zzz 说:
阮老师 啥时候给我们讲讲angular吧
2014年8月29日 22:46 | # | 引用
bjgyh 说:
偶然看了你翻译的《黑客与画家》,的确觉得非常好。我也是七零后,对编程不太懂。也感叹,要是早几年看到此书,或许对互联网思维会有更好的理解。希望译者能多翻一些美国前沿科技的精品书!
2014年8月30日 19:11 | # | 引用
土木坛子 说:
像我这种普通的博客网站,还是用着宋体也就够了。艺术性的网站字体要求才会比较高。
2014年8月31日 21:43 | # | 引用
土木坛子 说:
几乎没有区别。
2014年8月31日 21:44 | # | 引用
xbro 说:
微软雅黑和宋体就能满足一般需求了。
2014年9月 1日 14:39 | # | 引用
我爱大冶 说:
总结的不错,但是我们还是很少用宋体楷体,有的浏览器好像不显示,也没考虑mac的中文字体。
2014年9月13日 09:16 | # | 引用
电小弟 说:
说实话真的开发中文的话的确是不可能,可是...一个字伤不起啊,呵呵
2014年9月14日 03:01 | # | 引用
loekman 说:
使用css来自定义字体在web中,如果只是网站名称处使用,固定而少量的字,大可以把字体文件中不需要的文字删除仅保留需要的,体积就很小。
2014年9月18日 23:43 | # | 引用
小二 说:
XP确实没有预装,网上流行的盗版可能集成了雅黑,但这是非法的。
2014年9月23日 09:17 | # | 引用
ffockgfw 说:
阮大哥,你这样不行啊,连原文章的地址也不给出来,你这样只能权当是翻译人家的文章,堂堂一个博士都这样,此风气如此成长,不得了!
希望阮大哥加上你翻译人家的地址吧!
2014年9月30日 07:18 | # | 引用
筱雨生 说:
网页上字体的选择一般首选要考虑的是可识别性,这一点对于字体设计也同样适用。
除了我们广泛使用的宋体和雅黑,文章中提到的PMingliu也是我比较常用的字体之一。
需要指出的是,雅黑是从vista开始有的,win7出现后才得到广泛利用。
2014年10月18日 23:42 | # | 引用
墨菲斯托同学 说:
现在尤其重要的移动端也应该说说,无论是iOS\Android\WindowsPhone都在字体上没有什么交集
2014年10月23日 19:04 | # | 引用
jiangjunzaa 说:
界面的美观也很重要
2015年1月23日 16:46 | # | 引用
Sunny 说:
文章有点老了,但是还挺有用。
2016年5月12日 01:51 | # | 引用
Peter童 说:
其实宋体渲染好了的话还是很漂亮的。关键是windows系统对字体的渲染太差了,所以看起来丑陋。
对此有追求的人会安装一个叫mactype的软件渲染win系统的字体。
2017年11月19日 08:28 | # | 引用
WangNianyi2001 说:
文泉驿哭了
2018年10月28日 20:01 | # | 引用