字重

作为一个不是从切图年代过来的“切图仔”，最近的工作需要根据视觉稿写页面，看到 PingFangSC-Regular、PingFangSC-Medium、PingFangSC-Semibold 总是要查一下才知道对应的 font-weight 是多少。不禁发出灵魂的疑问 font-weight 与字体名到底有什么对应关系？

1 字重数值和字重名称之间的对应关系

ISO/IEC 9541 标准定义的字重名称并不是强制性的，不同的字体厂商会有自己的命名风格，不一定遵循 ISO 名称规则，如 W1 被命名为 UltraLight，W2 被命名为 Thin，W8 被命名位 Heavy，W9 被命名为 Black。CSS 规范中给出的字重名称只是常用名称，和字体自身实际的字重名称无关。在苹果的开发文档中将字重细分到 14 个级别。

一般的名称有（由细到粗排序）：

Ultra Light <= Extra Light < Thin < Light < Semi Light <= Regular < Medium < Semi Bold < Bold < Heavy <= Black

注意：

1. 在 CSS 中，font-weight 除了可以设置数值，还可以设置为 normal（相当于400），bold（相当于700）；lighter（比父元素细），bolder（比父元素粗），以及 inherit，initial，unset。
2. 在 CSS Fonts Module Level 4 规范中，font-weight 不再限制为 100~900 间的整数，取值范围变成 [1, 1000]。
3. 浏览器在渲染字体时，会使用字体匹配算法计算可用的字重。

2 字体的字重数量

一套字体不一定会包含9个字重，可能少于（比如微软雅黑）或者超出（比如方正兰亭黑）。下面列举了一些字体包含的字重数量：

1. Helvetica Neue 包含6个字重（UltraLight、Thin、Light、Regular、Medium、Bold）。
2. Roboto 包含6个字重（Thin、Light、Regular、Medium、Bold、Black）。
3. Segoe UI 包含6个字重（Light、Semilight、Regular、Semibold、Bold、Black）。
4. San Francisco 包含9个字重（Ultralight、Thin、Light、Regular、Medium、Semibold、Bold、Heavy、Black）
5. 微软雅黑（Microsoft YaHei），包含3个字重（Light、Regular、Bold）。
6. 苹方-简（PingFang SC）包含6个字重（Ultralight、Thin、Light、Regular、Medium、Semibold）。
7. 思源黑体（Source Han Sans）包含7个字重（ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy），Google Noto Sans CJK SC 中7个字重名称略有不同（Thin、Light、DemiLight、Regular、Medium、Bold、Black）。
8. 思源宋体（Source Han Serif）同样包含7个字重（ExtraLight、Light、Normal、Regular、Medium、Bold、Heavy），Google Noto Serif CJK SC 中的7个字重名称和思源宋体一致。
9. 方正兰亭黑Pro Global，包含8个字重（Extralight、Light、Regular、Demibold、Semibold、Bold、Extrabold、Heavy）。
10. 翔鹤黑体SC Pro（M XiangHe Hei SC Pro），包含10个字重（Ultra Light、Thin、Light、Book、Regular、Medium、Bold、Heavy、Black、Extra Black）。

注意：截止2019年，虽然 Noto Sans CJK SC 拥有7个字重，但在 Android 5.0-10.0 中，默认只包含 Regular 字重。

3 常见字体的字重

下面列出了一些常见的西文、中文字体以及它们的字重，其中的 font-weight 一栏仅供参考，不同字体搭配使用时以实际效果为准。

西文字体

中文字体

macOS

Windows

Common Fonts

4 CSS 使用示例

.headline {
  font-family: 'Source Han Sans SC', sans-serif;
  font-weight: 700;
  font-style: normal;
}

.caption {
  font-family: 'Source Han Sans SC', sans-serif;
  font-weight: 100;
  font-style: normal;
}

.content {
  font-family: 'Source Han Sans SC', sans-serif;
  font-weight: 400;
  font-style: normal;
}

不同浏览器的实际渲染结果有差异，比如 Chrome 不能100%根据字体族名称和字重识别对应字体，建议搭配 @font-face 使用。

@font-face {
  font-family: 'Source Han Sans SC';
  font-style: normal;
  font-weight: 100;
  src: local('Source Han Sans SC ExtraLight'), local('SourceHanSansSC-ExtraLight');
}

@font-face {
  font-family: 'Source Han Sans SC';
  font-style: normal;
  font-weight: 400;
  src: local('Source Han Sans SC Regular'), local('SourceHanSansSC-Regular');
}

@font-face {
  font-family: 'Source Han Sans SC';
  font-style: normal;
  font-weight: 700;
  src: local('Source Han Sans SC Bold'), local('SourceHanSansSC-Bold');
}

.headline {
  font-family: 'Source Han Sans SC', sans-serif;
  font-weight: 700;
}

.caption {
  font-family: 'Source Han Sans SC', sans-serif;
  font-weight: 100;
}

.content {
  font-family: 'Source Han Sans SC', sans-serif;
  font-weight: 400;
}

5 相关链接

• 类似「W3」、「W6」这样的字重表示法，是如何对笔画粗细进行规范定量的？ - 知乎
• L/R/M/B、W1/W2/W3… いろいろな太さ記号
• convertWeight - Apple Developer Documentation
• Using multiple weights and styles - Adobe Fonts User Guide
• 深入了解font-weight - 凹凸实验室
• font-weight - MDN
• 2.2. Font weight: the font-weight property - CSS Fonts Module Level 4
• 字体名称的那些事儿（一）：好名字是好的开始 - Adobe CJK Type Blog
• 字体名称的那些事儿（二）：读懂指示符的含义 - Adobe CJK Type Blog
• 字体名称的那些事儿（三）：字库名称的设置 - Adobe CJK Type Blog