小谈中文环境下中文排版的font-family 字体选择

2014/09/24 前端代码, 前端开发原创 5 23,132

在开发Mindia 主题的时候，为了弄出相对好看的中文排版，特意补习了下中文排版的font-family 字体选择的相关资料。以下就从自己的角度说下自己的不算得上是收获的收获吧。

众所周知，由于Windows 与其他平台（Mac、Linux）的不通用性，字体渲染等问题导致在面对中文用户的时候不得不多重考虑；加之中文字体相对于英文字体目前仍然无法采用webfont形式的劣势以及目前移动设备的盛行，使得我们在大呼坑爹的同时不得不忍受并适应之。但什么样的环境就有不同的适应法则，对于小小的font-family 字体，极力用好当前资源才是王道，并在其他方面提高用户体验的不足。

老掉牙的东西

在进入正文之前，一些font-family 的旧知识（规则）还是要复习下几点，比如说：

1、中文字体有英文的名称，但建议是中英文名称都写上。比如说微软雅黑英文名为“Microsoft YaHei”，实际时候只写英文名称即可，但保险之策是中英文名称也写上，如：

font-family: Arial, "Microsoft YaHei", "微软雅黑", sans-serif;

2、写font-family 时候英文字体要写在中文字体前面。这个应该是知道的了，但鄙人认为，如果面对的是Windows用户为主的话，其实微软雅黑也可以直接写在前头，因为微软雅黑本身有相应的英文字符。

3、向下兼容，优雅降级

这个就熟悉的Windows来说吧，现在主流应该是Windows7 ，但还有不少用户用着宋体为主流的Windows xp，那么考虑到这点，SimSun, "宋体" 还是有必要的。

各平台的主流字体支持情况

各系统的默认字体和常用字体：

系统	默认西文字体	默认中文字体	其他常用西文字体	其他常用中文字体
Windows	宋体	宋体	Tahoma、Arial、Verdana、Georgia	微软雅黑、黑体
Android 4.0以下	Droid Sans	Droid Sans Fallback	Arial	无宋体、无微软雅黑
Android 4.0及以上	Roboto	Roboto	Arial	无宋体、无微软雅黑
iOS	Helvetica Neue	Heiti SC (黑体)	Tahoma(v7.0)、Arial、Verdana、Georgia	STHeiti(v7.0)、无宋体、无微软雅黑
Mac OS X 10.6以下	Helvetica Neue	STHeiti (华文黑体)	Tahoma、Arial、Verdana、Georgia	宋体、无微软雅黑
Mac OS X 10.6及以上	Helvetica Neue	Hiragino Sans GB (冬青黑体简体中文)	Tahoma、Arial、Verdana、Georgia	宋体、无微软雅黑

各移动设备系统支持情况：

五大类字体	安卓4.0	IOS6.0	WP8
sans-serif（无衬线）	支持	支持	支持
serif（衬线）	支持	支持	支持
monospace（等宽）	支持	支持	支持
fantasy（梦幻）	不支持	支持	不支持
cuisive（草体）	不支持	不支持	不支持

当然目前这只是移动设备各系统的支持情况，然而pc端个浏览器的支持情况也各不相同，如：

五大类字体	IE系列	Chrome	Firefox
sans-serif（无衬线）	支持	不支持	不支持
serif（衬线）	支持	支持	支持
monospace（等宽）	支持	支持	支持
fantasy（梦幻）	支持	支持	支持
cuisive（草体）	不支持	不支持	不支持

上结论

废话就不做分析了，结合参考资料，给出我目前在用的font-family 代码吧，不一定最好，欢迎赐教。

下面非全局定义，而是针对特殊div 下的个性化定义：

/*微软雅黑*/
.yahei{font-family: 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif!important}
/*宋体*/
.songti{font-family: "Helvetica Neue", Helvetica,"Songti SC", "SimSun", serif!important}
/*楷体*/
.kaiti{font-family: "Helvetica Neue", Helvetica, "KaiTi", "楷体", "STKaiti", "华文楷体", serif!important}
/*华文仿宋*/
.fangsong{font-family: "Times New Roman", "Helvetica Neue", Helvetica, "FangSong", "仿宋", "STFangSong", "华文仿宋", serif!important}

如果是用于全局项目中，那么可能会有所不同，这里直接引用参考资料的代码：

/*移动端项目*/
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
/*pc端(含Mac)项目*/
font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;
/*移动和pc端项目*/
font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

当然，如何排布font-family 根本是看需求是什么，这个仅仅是作为参考。

参考资料：

https://ruby-china.org/topics/14005

http://ued.ctrip.com/blog/?p=3589

http://typo.sofi.sh/

http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html

http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/