在 web 应用中中文字体的使用有着极大的局限性。中文字体组成的特殊性导致其体积过于庞大，如果只是为了浏览网页，除了操作系统内置的字体之外开发者不可能让用户去下载字体，只能依靠操作系统的预装字体。

在可选性很差的前提之下，本文中整理了一些中文字体的最佳实践。

探索 web 字体

不推荐使用的字体声明

1
2
3
4
5
6
7
font-family: "宋体";

font-family: "宋体", Arial;

font-family: Arial, "宋体", "微软雅黑";

font-family: Helvetica, Arial, "华文细黑", "微软雅黑";

推荐以下字体声明

同时声明中文字体的字体名称（英文）和显示名称（中文）

操作系统中看到的宋体、微软雅黑、华文细黑这样的字体名称只是字体的显示名称，而不是字体文件的名称。

1
2
3
4
5
font-family: SimSun, "宋体";

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

font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

在中文字体之前声明英文字体

中文字体里包含英文字母基本上都很丑，所以用中文字体显示英文的效果不理想，所以不要忘了先声明英文字体。

1
2
3
font-family: Georgia, SimSun, "宋体";

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

字体族大体上分为两类：非衬线和衬线，所以在最后加上英文字体族的名称。

1
2
3
font-family: Georgia, SimSun, "宋体", serif;

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

中文并不像英文那样严格区分字体族，所以上面示例代码中衬线和非衬线在实际应用当中并不那么重要。

考虑不同操作系统的用户字体体验

1
font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", sans-serif;

划重点

• 不要把微软雅黑放在中文字体的最前面，或者直接不声明微软雅黑
• 英文字体的名称多于两个单词和中文字体在 css 中声明时加引号

最佳实践

• 判断浏览器 User-Agent 对不同平台使用不同的字体声明
• 除非有特别的原因，否则尽量保持正文用宋体，标题和其他字体大的地方用微软雅黑（针对 Windows）
• Mac 下的冬青体效果极佳，或者使用华文黑体系列做 fallback