Web 开发中文字体指南

Devrsi0n • 
更新于 

作为一名前端工程师,容易在还原设计师视觉稿时忽略字体,其实选择一套精心设计过的字体能极大地提升产品的视觉感受。今天就从这个很容易被忽略的细节入手,Web 开发需要了解的字体相关知识都梳理一遍。然而不像拉丁语系翻来覆去就那么一点西文字符,常见的字体就 100+ KB,而中文字体要包含常用汉字动辄 10+ MB 的体积(比如,著名的 思源黑体 光常规字重就高达 23 MB)实在不适合内嵌到 Web。

所以常见的做法都是选择操作系统自带的字体。一般放多套字体按顺序渲染,若第一个字体操作系统已安装即可渲染,未安装则尝试渲染第二个字体,以此类推直至所有字体尝试渲染都失败的话就回退(fallback)到浏览器默认字体。

注意,一般把西文字体放在中文字体之前,因为中文字体自带了西文,但是效果一般不太好。

下面看下常见的大型 Web 网站的系统字体选择。

  • Wordpress
css
1body {
2 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
3 Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
4}
  • Medium
css
1body {
2 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
3 Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
4}
  • GitHub
css
1body {
2 font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
3 sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
4}

上面很多字体并不常见,下面表格列举了这些字体对应的设备/系统。

字体适配设备
-apple-system (San Francisco)iOS Safari, macOS Safari, macOS Firefox
BlinkMacSystemFont (San Francisco)macOS Chrome
Segoe UIWindows
RobotoAndroid, Chrome OS
Oxygen / Oxygen-SansKDE
Fira SansFirefox OS
Droid Sans旧版本 Android
UbuntuUbuntu 系统
CantarellGNOME
Helvetica Neue小于 10.11 版本的 macOS

字体一般分为衬线字体(Serif)和无衬线字体(Sans-Serif),它们有什么区别?

Serif VS Sans-Serif

在字体排印学里,衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线体(serif),也叫“白体”;没有衬线的字体,则叫做无衬线体(sans-serif),相对的也叫“黑体”。维基百科这 2 张图一目了然。

西文

serif and sans serif

中文

serif and sans serif 2

Serif 的字体容易辨认,因此易读性较高。反之 Sans Serif 则较醒目,但在行文阅读的情況下,Sans-Serif 容易造成字母辨认的困扰,常会有来回重读及上下行错乱的情形。

Serif 强调了字母笔画的开始及结束,因此较易前后连续性的辨识。 Serif 强调一个 word,而非单一的字母,反之 Sans-Serif 则强调个别字母。

在小字体的场合,通常 Sans-Serif 比 Serif 更清晰。

结论

一般在正文里使用 Serif,显示效果较为工整,但注意字体不能设置的过小,Serif 在高分屏显示效果最佳,建议非高分屏使用 Sans Serif 字体。标题和除正文之外的地方适合用 Sans Serif,较为醒目和易辨识。

下面这段代码可用于检测高分屏

js
1function isHighDensity() {
2 return (
3 typeof window !== `undefined` &&
4 ((window.matchMedia &&
5 (window.matchMedia(
6 'only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)'
7 ).matches ||
8 window.matchMedia(
9 'only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)'
10 ).matches)) ||
11 (window.devicePixelRatio && window.devicePixelRatio > 1.3))
12 );
13}

下面按非衬线和衬线字体划分,介绍一些操作系统自带的较美观的字体。

Sans-Serif 非衬线字体

Sans-Serif 字体清晰可辨,一般操作系统默认字体也是 Sans-Serif,相比 Serif 选择较多。

macOS

PingFang 苹方

pingfang

PingFang 是 mac 系统自 OS X EL Capitan(10.11)自带的字体,字体清晰锐利。

Hiragino Sans GB 冬青黑体

hiragino

苹方虽好,但是在较新的 mac 系统(10.11)才自带,冬青黑体是 Mac OS X Snow Leopard(10.6) 自带字体,加上这款字体可以兼容更多的 mac 系统。

Windows

Microsoft YaHei 微软雅黑

Microsoft YaHei

微软雅黑是从 Windows Vista 一起发布的字体,字形饱满,字间留白很少,在小字号下也能清晰可辨。

Linux

WenQuanYi Micro Hei

WenQuanYi Micro Hei

文泉驿微米黑是 Linux 上较为常见的高质量中文非衬线字体。

Serif 衬线字体

各操作系统下优美的 Serif 字体选择较少,选择典型字体讲解。

macOS

Songti & STSong

songti sc stsong

Mac 上的 Songti SC/TC 和 STSong 两款都是常州华文公司制作的「华文宋体」。2 款字体字型十分相近,但是 Songti SC 字重较大。

Windows

SimSun

simsun

Linux

AR PL Sungti 文鼎简报宋

AR PL Sungti

AR PL Sungti 文鼎简报宋是 Linux 上为数不多的高质量衬线字体。

End

以上就是 Web 开发中系统自带的一些高质量的字体选择,如果你有更好的字体推荐,欢迎告知。:)

参考文章

在 GitHub 上编辑此文

其他文章

开源了我独立开发的评论组件 SaaS 🔥 🚀

在独立开发一年后,今天开源了我的 Next.js App - Chirpy, 一个主打保护隐私、支持主题定制的评论组件 SaaS。

2022-01-15
© 2019 – 2022 devrsi0n
Link to $https://bit.ly/2NcAZQZLink to $https://github.com/devrsi0nLink to $https://weibo.com/qianmofeiyu