中文网页中的字体选型及开发指南

传送门

引子
例子
- 知乎
- 简书
- GitHub
- 苹果
- 小米
- 哔哩哔哩
- 锤子
字体的分类
- 非衬线字体（Sans-Serif）
- 衬线字体（Serif）
- 等宽字体（Monospace）
常见的字体
- 等线字体 Sans-serif
- 衬线字体 Serif
- 等宽字体 Monospace
操作系统的预装字体
- Windows
- macOS / iOS / iPadOS
- Linux
- Microsoft Office
字体的使用
- 系统字体
- Web Fonts
总结成果
参考文献
版权声明

引子

趁着暑假，我又搭建了一个自己的个人博客，不同于以往，这次用的是较新的博客系统 Ghost。

因为 Ghost 的主题和 UI 实在是太好看了。

而且易用性也很好，比起臃肿的 WordPress 和折腾人的 Hexo ，Ghost 正中我意。

不过作为一个年轻的、国外开发者主导的博客系统，它似乎还没有考虑到中文显示这种东西。

Windows 平台下，Ghost 的中文默认显示为宋体，实在是辣眼睛。

于是就有了这次的探索，中文网页设计中，特别是文字较多的博客类，用那种字体更为合适呢？

例子

先来看看大公司网站所用的字体：

知乎

body {font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;font-size: 15px;color: #121212;
}

简书

body {line-height: 1.42857;color: #404040;background-color: #fff;font-family: -apple-system,BlinkMacSystemFont,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;font-feature-settings: "tnum";font-variant: tabular-nums;
}

GitHub


body {font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size: 14px;line-height: 1.5;
}code {margin-top: 0;margin-bottom: 0;font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size: 12px;
}

苹果

body {font-size: 17px;line-height: 1.5294717647;font-weight: 400;letter-spacing: -0.021em;font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;background-color: white;color: #333;font-style: normal;
}

小米

body {font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;color: #333;background-color: #fff;min-width: 1226px;
}

哔哩哔哩

2022年1月17日更新

/* 新版首页 */
body {font-family: PingFang SC,HarmonyOS_Regular,Helvetica Neue,Microsoft YaHei,sans-serif!important;font-weight: 400;overflow-x: auto;
}/* 旧版 */
body {margin: 0;font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size: 12px;line-height: 1.5;color: #222;background-color: #fff;
}

锤子

html {font-family: Helvetica Neue,PingFang SC,Hiragino Sans GB,Heiti SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
}

字体的分类

非衬线字体（Sans-Serif）

非衬线字体适用于屏幕显示，代表字体是黑体。可以用在较理性的技术类文章。

衬线字体（Serif）

衬线字体适用于印刷出版，代表字体是宋体。可以用在较感性的生活随笔类文章中。

等宽字体（Monospace）

等宽字体的每个字符具有相同的宽度，这使得英文字符和标点总是工整地排列，这些字体还专门为一些字母和符号做了优化，让你一眼就可以区别出 O0 / 1ilIL，代表字体 Source Code Pro 。

例如这一段就是等宽字体 Source Code Pro 的效果
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">

常见的字体

2022年1月17日更新

等线字体 Sans-serif

字体	用途
`system-ui`	默认系统字体
`-apple-system`, `BlinkMacSystemFont`	macOS, iOS
Segoe UI	Microsoft Windows, Xbox, etc.
Roboto	较新版本的 Android
Oxygen	Linux / KDE
Ubuntu	Linux / Ubuntu
Cantarell	Linux / GNOME 3
Fira Sans	Firefox OS
Droid Sans	旧版本的 Android
Helvetica Neue	OSX
Arial, `sans-serif`	备胎

Helvetica ：被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial ：Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family ：Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana ：专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma ：也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。

微软雅黑（Microsoft YaHei） ：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。微软雅黑的美观度和清晰度都较好，可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑（STXihei）。

华文细黑 ：Mac下的默认中文。

Droid Sans和衍生的WenQuanYi Microhei ：Andriod中的中文，也是Linux绝大多数发行版本的默认中文，，当然也有用WenQuanyi Zenhei的，不过比较少了。

衬线字体 Serif

Georgia ：基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times ：Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。

中易宋体（SimSun） ：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。宋体是最常见的中文字体，如果没有指定字体，操作系统往往选择它来渲染。很多人认为，这种字体并不美观。

仿宋（FangSong） ：这种字体是衬线体，比宋体的装饰性更强。如果字号太小，会影响清晰度，所以只有在字号大于14px的情况下，才可以考虑这种字体。它在Mac平台的对应字体是"华文仿宋"（STFangsong）。
楷体（KaiTi） ：楷体也是衬线体，装饰性与仿宋体接近，但是宽度更大，笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。它在Mac平台的对应字体是"华文楷体"（STKaiti）。

等宽字体 Monospace

ui-monospace：较新的等宽字体声明形式，已在 Safari 13.19 中得到支持。这也是使用 macOS 新的“SF Mono”字体的唯一方法。

Menlo, Monaco：旧版本 macOS / OSX 的默认等宽字体，在支持 .ui-monospace 的 macOS 上不再生效。

Cascadia Code, Segoe UI Mono：Windows 自家的等宽字体，但默认不包含在 Windows 中，因为 Windows 根本没有默认的等宽字体（除非算上Courier New）。但是Segue UI Mono已随一些微软自家的软件一起分发，正在普及中。

Cascadia Mono：是微软正在开发的一种新的等宽字体，随 Windows Terminal 一起提供。

Source Code Pro：知名的等宽字体，GNOME12 中的默认字体，但来自不同的家族，作为默认的可变宽度字体Cantarell。

操作系统的预装字体

操作系统决定了开发者可以使用的字体。所以，第一步，我们必须了解操作系统到底提供哪些字体。

可以通过查询各维基百科的这个页面，列出了常见的不同系统自带的日中韩字体：List Of CJK fonts。

Windows

宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋GB2312：FangSongGB2312
楷体GB2312：KaiTiGB2312
Windows XP+: MS Hei 微软黑体
Windows Vista+: Microsoft YaHei 微软雅黑

macOS / iOS / iPadOS

详见苹果官网的 macOS Mojave 附带的字体。

华文细黑：STHeiti Light （又名STXihei）
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
OSX 10.2+: 华文黑体 STHeiti
OSX 10.6+: 黑体-简 Heiti SC / 黑体-繁 Heiti TC
OSX 10.6+: 冬青黑体简体中文 Hiragino Sans GB
OSX 10.11+: 苹方-简 PingFang SC / 苹方-繁 PingFang TC

iOS / iPadOS 使用与 macOS 相同的中文字体。详见苹果官网的字体列表。

但是要注意的是，iOS / iPadOS 系统并不预装 CJK 衬线字体。所以几乎所有的中文网页在 iOS / iPadOS 都是显示为非衬线字体。原因正是前文所说的，黑体在屏幕上的可读性比宋体要高。

Linux

Open Source*: WenQuanYi Zen Hei 文泉驿正黑
Open Source*: WenQuanYi Micro Hei 文泉驿微米黑
Open Source*: Noto Sans CJK / Source Han Sans

Linux 由于发行版众多，比较混乱，一般需要用户自行安装中文字体，常见的有文泉驿、思源等开源字体。

Android 目前使用 Adobe 和 Google 联合开发的思源系列 Source * 字体，不过在 Android 中叫做 Noto *。

Microsoft Office

如果用户装了 Microsoft Office ，还会多出一些字体。

隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

字体的使用

系统字体

CSS 的 font-family 命令，指定了网页元素所使用的字体。下面是一个例子。

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", serif;

它的规则有三条。

（1）优先使用排在前面的字体。

（2）如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。

（3）如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。

根据这些规则，font-family 应该优先指定英文字体，然后再指定中文字体。 否则，中文字体所包含的英文字母，会取代英文字体，这往往很丑陋。

为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family。 比如，"微软雅黑"的英文名称是Microsoft YaHei。

font-family后面的值最好全部写英文，中文的话在 macOS 下某些版本的浏览器是不支持的，认不出来，还有比"Microsoft YaHei"这种英文写法，更推荐的写法是把汉字转义为 unicode,比如微软雅黑转义之后就是"\5FAE\8F6F\96C5\9ED1"，这样能兼容更多平台和各种不同语言的浏览器，兼容性最好。

此外，中文字体的中文名称，以及由多个单词组成的英文名称，应该放在双引号内。

由于 Windows 和 Mac 的中文字体没有交叉，所以应该同时为两个平台指定字体。

常见的做法是，Windows平台指定"微软雅黑"（Microsoft YaHei），Mac平台指定"华文细黑"（STXihei）。

Web Fonts

如果是纯英文网页的话，选字体的事情比较好办，因为直接引入 Web Fonts 的成本非常低（文件小），而且现在 Web Fonts 的 [兼容性](“https://caniuse.com/#search=web font”) 很好，基本上所有主流浏览器都支持，就能保证各个平台所用的字体的一致性。

对于开源字体，如果能在 Google Fonts 直接找到的话，可以通过他们的 CDN 直接引用到页面上。例如 Source Code Pro：

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">

或者

<style>@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');</style>

如果找不到免费的 CDN 的话，也可以下载字体文件部署到自己的服务器上。

然后在 style.css 中加入兼容各个浏览器的 @font-face 定义:

@font-face {font-family: "JetBrains Mono";src: url("./fonts/JetBrainsMono-Regular.eot");src: url("./fonts/JetBrainsMono-Regular.eot?#iefix") format("embedded-opentype"),url("./fonts/JetBrainsMono-Regular.woff2") format("woff2"),url("./fonts/JetBrainsMono-Regular.woff") format("woff"),url("./fonts/JetBrainsMono-Regular.ttf") format("truetype");font-weight: 400;font-style: normal;
}

之后便可以在 CSS 中使用该字体：

.code {font-family: "JetBrains Mono", monospace;
}

这样浏览器就会下载自己能使用的字体文件进行文字渲染了。

总结成果

你现在所看到的这个页面的字体

:root {--font-sans-serif: -apple-system, BlinkMacSystemFont, "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "PingFang SC",HarmonyOS_Regular, "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",Helvetica, "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei",Arial, sans-serif;--font-serif: STZhongsong, STSong, "Noto Serif CJK", "Noto Serif SC", PMingLiu,SimSun, "WenQuanYi Bitmap Song", "Times New Roman", Times, serif,"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code","Segoe UI Mono", "Source Code Pro", Menlo, Consolas, "Liberation Mono",monospace;
}

参考文献

https://blog.mutoo.im/2020/02/fonts-for-my-blog-theme
https://www.runoob.com/w3cnote/web-font-family.html
http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html
https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/

版权声明

本文由 Jacob 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，首发于 www.jacobruan.com 。