中文字体栈怎么写
适合谁看:要给中文网站写
font-family的前端开发者,不管有没有用网页字体。
字体栈是什么
font-family 可以写一串字体名,浏览器从左到右找,逐个字符判断:第一个字体里没有这个字,就用下一个字体显示这个字[1]。就用下一个字体显示这个字。所以字体栈既是「首选不在时的备选」,也是「首选缺字时的补字」。
常见系统中文字体
| 系统 | 黑体类 | 宋体类 | 楷体类 |
|---|---|---|---|
| macOS、iOS | PingFang SC(苹方) | Songti SC(宋体-简) | Kaiti SC(楷体-简) |
| Windows | Microsoft YaHei(微软雅黑) | SimSun(宋体) | KaiTi(楷体) |
| Android | 系统自带,通常是 Noto Sans CJK / 思源黑体,部分厂商用自家字体 | 视机型而定 | 视机型而定 |
| Linux 桌面 | Noto Sans CJK SC、Source Han Sans SC、WenQuanYi Micro Hei 等 | Noto Serif CJK SC 等 | 视发行版而定 |
不同系统版本、不同厂商的预装字体有差别,上表只是常见情况。macOS 上的部分字体需要在「字体册」里下载后才能用[3]。里下载后才能用。
推荐写法
黑体类:
font-family: "网页字体名", -apple-system, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
宋体类:
font-family: "网页字体名", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC",
"SimSun", serif;
几个要点
- 西文字体写在中文字体前面,可以让英文、数字用西文字体,中文落到后面的中文字体上。反过来写,中文字体自带的西文会被用上。
- 最后一定要写通用族名:
sans-serif、serif、monospace[4]。 - 名字有空格要加引号。
- 英文名比中文名可靠。 部分浏览器和系统只认英文名,写了中文名(如「微软雅黑」)可以和英文名并列,但不要只写中文名。
system-ui会用系统界面字体,在中文环境下效果因系统而异,用在界面组件上比用在长文正文上更合适。
缺字的情况
生僻字、新收录的扩展区汉字,系统字体也可能没有。要保证这些字能显示,可以在字体栈末尾加一款覆盖范围大的字体,见《网页和系统里怎么显示生僻字》。