字重

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

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

ISO Value ISO Name & Abbr CSS Value CSS Name Apple Terminology
1. ultralight
W1 Ultra Light (UL) 100 Thin 2. thin
W2 Extra Light (EL) 200 Extra Light (Ultra Light) 3. light, extralight
W3 Light (L) 300 Light 4. book
W4 Semi Light (SL), Regular (R) 400 Normal 5. regular, plain, display, roman
W5 Medium (M) 500 Medium 6. medium
7. demi, demibold
W6 Semi Bold (SB), Demi Bold (DB, D) 600 Semi Bold (Demi Bold) 8. semi, semibold
W7 Bold (B) 700 Bold 9. bold
W8 Extra Bold (EB, E) 800 Extra Bold (Ultra Bold) 10. extra, extrabold
11. heavy, heavyface
W9 Ultra Bold (UB, U) 900 Black (Heavy) 12. black, super
13. ultra, ultrablack, fat
14. extrablack, obese, nord

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(比父元素粗),以及 inheritinitialunset
  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 一栏仅供参考,不同字体搭配使用时以实际效果为准。

西文字体

font-weight Helvetica Neue Segoe UI Roboto San Francisco Pro
100 HelveticaNeue-UltraLight - - SF Pro Ultralight
200 HelveticaNeue-Thin SegoeUI-Light Roboto-Thin SF Pro Thin
300 HelveticaNeue-Light SegoeUI-Semilight Roboto-Light SF Pro Light
400 HelveticaNeue-Regular SegoeUI-Regular Roboto-Regular SF Pro Regular
500 HelveticaNeue-Medium - Roboto-Medium SF Pro Medium
600 - SegoeUI-Semibold - SF Pro Semibold
700 HelveticaNeue-Bold SegoeUI-Bold Roboto-Bold SF Pro Bold
800 - - - SF Pro Heavy
900 - SegoeUI-Black Roboto-Black SF Pro Black

中文字体

macOS

font-weight PingFang SC Heiti SC Songti SC
100 PingFangSC-Ultralight - -
200 PingFangSC-Thin - -
300 PingFangSC-Light STHeitiSC-Light STSongti-SC-Light
400 PingFangSC-Regular - STSongti-SC-Regular
500 PingFangSC-Medium STHeitiSC-Medium -
600 PingFangSC-Semibold - -
700 - - STSongti-SC-Bold
800 - - -
900 - - STSongti-SC-Black

Windows

font-weight Microsoft YaHei DengXian
100 - -
200 - -
300 Microsoft YaHei Light DengXian Light
400 Microsoft YaHei Regular DengXian Regular
500 - -
600 - -
700 Microsoft YaHei Bold DengXian Bold
800 - -
900 - -

Common Fonts

font-weight Source Han Sans SC Noto Sans CJK SC FZLTH Pro Global
100 SourceHanSansSC-ExtraLight NotoSansCJKsc-Thin FZLTHProGlobal-Extralight
200 SourceHanSansSC-Light NotoSansCJKsc-Light -
300 SourceHanSansSC-Normal NotoSansCJKsc-DemiLight FZLTHProGlobal-Light
400 SourceHanSansSC-Regular NotoSansCJKsc-Regular FZLTHProGlobal-Regular
500 SourceHanSansSC-Medium NotoSansCJKsc-Medium FZLTHProGlobal-Demibold
600 - - FZLTHProGlobal-Semibold
700 SourceHanSansSC-Bold NotoSansCJKsc-Bold FZLTHProGlobal-Bold
800 - - FZLTHProGlobal-Extrabold
900 SourceHanSansSC-Heavy NotoSansCJKsc-Black FZLTHProGlobal-Heavy

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 相关链接