前端css字体调研

[cos2004]

一、一些数据

先贴一些各种系统的默认字体数据：

ios：

ios9+中文：PingFang SC(苹方)

ios9+英文/数字：San Francisco

其他ios中文：STHeiTi(华文黑体)

其他ios英文/数字：Helvetica

mac：

10.5：华文黑体（STXihei/STHeiti）

10.6-10.10：黑体-简（Heiti SC），华文黑体的改进版；在10.6后自带了冬青黑Hiragino Sans GB，但不是默认字体

10.11：El Capitan后默认字体改为PingFang SC(苹方)，英文/数字改为San Francisco

注意：电脑的字体和网页css字体没有必然关系，而且浏览器自身一般支持设定字体，贴出来仅供参考。

android：

中文：Droidsansfallback

英文/数字：Roboto(4.0+)，Droid Sans(4.0以下)

二、分析

• ios9+的css字体设置了-apple-system的话中文会调用苹方，英文/数字则调San Francisco；San Francisco在ios/mac上没有显式暴露出来(不能通过字体名字调用)，需要通过这种方式调用；
• 在不支持-apple-system的ios系统下会调用华文细黑的中文/英文/数字；
• sans-serif在非ios9+下会调用华文细黑的中文/英文/数字；
• sans-serif在ios9+下会调用苹方的中文/英文/数字；
• sans-serif在安卓下会调用系统的中文/英文字体，一般不需要其他设置；
• 总的来说sans-serif在手机系统下会调用默认中文字体的中文/英文/数字

顺便说一下几个字体的规律：

• font-family从左到右查找字体，如果没有则顺序查找下一个；
• 中文字体一般包括了英文/数字符号，英文字体不包括中文字体，即系统如果有一个声明的中文字体，则英文也会用该中文字体去展示；
• 中文字体都有对应的英文名字、unicode写法，如“微软雅黑, Microsoft Yahei, \5FAE\8F6F\96C5\9ED1”，英文写法在可读性和适用性上更好；
• Helvetica和Arial分别是mac(ios)和windows下最常见的无衬线西文字体；
• 有一些软件会自带一些字体供其使用，如photoshop

字体预览demo：http://jdc.jd.com/demo/font_test/index.html

由于手机系统一般只有一种中文字体，所以定义css字体时一般只要考虑英文/数字的字体。以下是我总结出来可供参考的几个字体设置：

参考样式1：

//全部ios英文&数字统一Helvetica，ios9+中文苹方，其他ios中文华文细黑，安卓默认中英文
body {
    font-family: Helvetica,sans-serif;
}

参考样式2：

//ios9+中文苹方，英文/数字San Francisco，其他ios中文华文细黑，英文Helvetica，安卓默认中英文
body {
    font-family: -apple-system,Helvetica,sans-serif;
}

三、几个大站的css字体

下面的数据均在2016年5月25日采集。

站点	字体	ios9+	其余ios	安卓
手机天猫	Helvetica,sans-serif	中文：苹方，英/数：Helvetica	中文：华文细黑，英/数：Helvetica	默认中英文字体
手机淘宝	sans-serif	中文：苹方，英/数：苹方	中文：华文细黑，英/数：华文细黑	默认中英文字体
h5微博timeline页面	PingFang-SC-Regular,Helvetica,sans-serif	中文：苹方，英/数：苹方	中文：华文细黑，英/数：Helvetica	默认中英文字体
微信文章页	-apple-system-font,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif	中文：苹方，英/数：San Francisco	中文：华文细黑，英/数：Helvetica Neue	默认中英文字体

其中微信文章页因为要兼容pc和mac，所以用了比较多字体。

四、参考资料

中文Web字体方案 https://github.com/z4rd/demo/issues/3

alloyteam移动开发规范 http://alloyteam.github.io/Spirit/modules/Standard/#font

如何保证网页的字体在各平台都尽量显示为最高质量的黑体？ https://www.zhihu.com/question/19911793

[chuyik]

赞~~

[urnotzane]

赞~~