前端字体最佳实践

前端的字体方案是一个优雅降级方案，即在代码中列出字体顺序让计算机匹配，先匹配到的字体就会成为当前显示字体。

字体匹配顺序如下：

• 语言顺序
  • 系统自带
  • 英文（包含阿拉伯数字）
  • 中文
• 平台顺序
  • iOS|MacOS
  • Android
  • Windows
  • 其他

字体基础知识

衬线字体与无衬线字体

就 Web 常用的一些字体而言，其实大体上分为衬线字体和无衬线字体。

衬线字体 – 关键字为 serif，意为有衬线的字体，衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰，而且笔画的粗细会有所不同，这些细节在大写字母中特别明显。

无衬线字体 – 关键字为 sans-serif，也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。与衬线字体相反，该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。

中文下，无衬线字体就是黑体，黑体字也就是又称方体或等线体，没有衬线装饰，字形端庄，笔画横平竖直，笔迹全部一样粗细。

无衬线字体更加适合阅读所以是所有页面字体的基础方案即降级匹配的兜底方案。

字体属性

多个字体名称用,分割

font-family: Helvetica, Arial, sans-serif;

中间带空格的字体名称可用字符串包裹起来

font-family: 'Microsoft Yahei';

连字符的字体名无需用字符串包裹

字重

我们看到有些字体在安装时不是一个文件，而是分成了 light,regular,bold
更甚者分成了 thin,demilight,light,regular,medium,bold,black

正确更改字重方式

font-family: 'PingFang SC Light'; ❌
font-weight: 300; ✅

字重表达方式

属性名称： font-weight
属性值： normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值： normal

• 100 - Thin
• 200 - Extra Light (Demi Light, Ultra Light)
• 300 - Light
• 400 - Regular (Normal)
• 500 - Medium
• 600 - Semi Bold (Demi Bold)
• 700 - Bold
• 800 - Extra Bold (Ultra Bold)
• 900 - Black (Heavy)

normal、regular 与 400 相同
bold 与 700 相同
bolder 指定外观的重量大于继承的值
lighter 指定外观的重量小于继承的值

各个操作系统上都有哪些常用字体

1. Windows

   • 中文

     • 宋体（SimSun, \5b8b\4f53）
     • 微软雅黑（Microsoft Yahei）

   • 英文

     • Arial
     • Tahoma
     • Verdana

2. iOS | MacOS

   • 中文
     • 苹方（PingFang SC）
     • 华文黑体（STHeiti）、华文细黑（STXihei）
     • 黑体-简（Heiti SC）
     • 冬青黑体（ Hiragino Sans GB ）
   • 英文
     • Times New Roman
     • Helvetica | Helvetica Neue
     • San Francisco

3. Android

   • 中文

     • 思源黑体（Noto Sans）

   • 英文

     • Roboto

4. CSS Fonts

   • CSS Fonts Module Level 3 – Basic Font Properties

     • serif 衬线字体
     • sans-serif 非衬线字体
     • monospace 等宽字体
     • cursive 草书字体
     • fantasy 主要是那些具有特殊艺术效果的字体

   • CSS Fonts Module Level 4 – Generic font families

     • system-ui 系统默认字体。在不同的操作系统的 Web 页面下，自动选择本操作系统下的默认系统字体
     • -apple-system/BlinkMacSystemFont 在 macOS 和 iOS 上，我们需要使用 -apple-system 及 BlinkMacSystemFont 来兼容适配 system-ui 标准

版权问题

没有版权问题的情况

计算机系统一般都会附带字体，我们用软件匹配降级的形式使用字体，没有版权问题。

极端点，你在代码里指定了某些付费字体但没有随软件单独打包发布而是在客户电脑上单独安装了该字体都没有版权问题。

有版权问题的情况

包括但不限于：

• 字体库随软件一起打包发布的
• 字体库被上传到云端引用的
• 字体库被字蛛类软件抽取单独生成字体文件的
• 页面图片上有使用未授权字体的

推荐的页面 CSS 字体设置

body {
  font-family: system-ui, -apple-system, Helvetica, Roboto, Tahoma, Arial, 'PingFang SC',
    'Noto Sans', 'Microsoft YaHei', sans-serif;
}