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

在开发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, “宋体” 还是有必要的。

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

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

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

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

上结论

废话就不做分析了，结合参考资料，给出我目前在用的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

Chinese Standard Web Fonts: A Guide to CSS Font Family Declarations for Web Design in Simplified Chinese