字体,以及 font-family

丢掉对字体的错误认知

  1. 字体是有版权的,大部分字体在商用时,需要向字体厂商购买授权。比如使用微软雅黑需要向北京北大方正电子有限公司购买授权,使用 Helvetica 需要向蒙纳(Monotype)公司购买授权。

  2. 如果没有向用户提供字体文件(如 Web font 或者内嵌到 App 中),而仅仅是在 CSS 中指定字体名称,不需要购买授权,因为其只是一段声明,表示期望浏览器优先使用某种字体渲染文本(实际调用时涉及到浏览器的字体匹配算法)。而如果在PDF、图片、视频中使用字体,需要购买授权(其中 SVG 是特例。另外,在 three.js 中加载商用字体需要授权),因为本质上它们使用了字体的字形信息。

  3. 在 Linux 服务器上,可以免费商用的中文字体主要有思源黑体、思源宋体。尊重版权,不建议将 Windows 平台字体复制到 Linux 平台使用。

  4. 不同平台,预置的字体并不相同。比如就个人电脑而言,微软雅黑仅 Windows 系统内置,而苹方也只有 macOS 系统内置。Android 和 iOS 系统内置的字体各不相同,Kindle 也是如此,甚至不同版本的 Microsoft Office 包含的字体都不尽相同。这要求在计算机中使用字体时,需要考虑 Fallback。

  5. 常见的“宋体”、“黑体”、“楷体”并不是具体的字体名,它们是一类中文字体的总称。比如 Windows 中的宋体,即中易宋体(SimSun),由北京中易中标电子信息技术有限公司设计制作;而 macOS 中的宋体简/繁(Songti SC/TC)字体,出自常州华文印刷有限公司。

字体基本概念

  • 字符(Character):字母、数字、汉字、符号等,是一种抽象实体。
  • 字形(Glyph):单个「字符」的具体表达,一个字可有多个不同的字形。原则上 Unicode 中只对字,而非字形编码。
  • 字型(Font):印刷行业中,指某一整套具有同样样式和尺码的字形,如一整套中易宋体 5 号字、一整套 9 磅 Helvetica 粗体字。
  • 字体(Typeface):若干个「字型」在若干个尺寸上的集合。
    • 「书体」- 宋体、仿宋体、黑体等。例如 Windows 自带的「宋体」实为「中易宋体」。

随着计算机字体 (computer font) 的普及,可缩放的矢量字体的出现使得「字型」与「字体」的界限逐渐模糊,现今这两个概念在数字排印领域越来越多地被当做同义词使用。

——摘录自顾轶灵《字体漫谈》Slide

CSS 中的 font-family 属性

font-family: <family-name> | <generic-family>
  • <family-name> 即字体族名称,名称取决于字体文件定义,如 "Helvetica"、"微软雅黑"。对于中文字体,为了兼容性推荐使用英文字体族名称,如微软雅黑,应使用 "Microsoft YaHei",如果字体族名称中包含空格,需要加上引号(CSS 中单引号、双引号都可以使用)。

  • <generic-family> 即通用字体族,名称为规范中定义的一些关键词,如 "serif"、"sans-serif"(实际使用时不包含引号)。

family-name 字体族

实际上浏览器在渲染字体时,会查找字体中的字体族(Font Family)英文/中文名称、PostScript 名称、全名(Full Font Name)等信息。不同操作系统,不同浏览器处理方式不完全相同。比如,同样使用 Chrome 浏览器,Windows 支持写 "方正书宋_GBK",而 macOS 只支持写 "FZShuSong-Z01"。另外,虽然浏览器支持直接书写字体的全名,但字体全名中会包含字体粗细、斜体(italic)、长体(condensed)等具体属性,一般不建议这么做,字体的风格应该在 CSS 中通过 font-weightfont-stylefont-stretch 等属性指定,由浏览器决定实际渲染的字体。

以下是一些字体的信息示例(系列即字体族):

字体文件名称      FZHTJW.ttf
PostScript 名称  FZHTJW--GB1-0
全名             方正黑体简体/FZHei-B01S
系列             方正黑体简体/FZHei-B01S
样式             常规体/Regular

字体文件名称      FZSS_GBK.ttf
PostScript 名称  FZSSK--GBK1-0
全名             方正书宋_GBK/FZShuSong-Z01
系列             方正书宋_GBK/FZShuSong-Z01
样式             Regular

字体文件名称      FZSSJW.ttf
PostScript 名称  FZSSJW--GB1-0
全名             方正书宋简体/FZShuSong-Z01S
系列             方正书宋简体/FZShuSong-Z01S
样式             Regular

字体文件名称      UbuntuMono-R.ttf
PostScript 名称  UbuntuMono-Regular
全名             Ubuntu Mono
系列             Ubuntu Mono
样式             Regular

字体文件名称      SourceHanSansSC-Regular.otf
PostScript 名称  SourceHanSansSC-Regular
全名             思源黑体 Regular/Source Han Sans SC Regular
系列             思源黑体/Source Han Sans SC
样式             Regular

字体文件名称      NotoSansCJKsc-Regular.otf
PostScript 名称  NotoSansCJKsc-Regular
全名             Noto Sans CJK SC Regular
系列             Noto Sans CJK SC
样式             Regular

generic-family 通用字体族

在 CSS Fonts Module Level 3 中定义了 5 个通用字体族,包括:"serif","sans-serif","cursive","fantasy","monospace"。

  • serif 衬线字体,如 Times/Times New Roman, Georgia, 中易宋体, 新宋体, 华文中宋, 方正宋体
  • sans-serif 无衬线字体,如 Helvetica, Arial, Verdana, 微软雅黑, 中易黑体, 方正黑体, 华文细黑, 苹方
  • cursive 手写体,如 Corsiva, Zapfino,中易楷体, 华文楷体, 方正楷体, 华文行楷
  • fantasy: “幻想体”,艺术字体、美术字体,如 Comic Sans MS, Webdings, Wingdings
  • monospace 等宽字体,如 Courier, Consolas, DejaVu Sans Mono, Menlo, Source Code Pro, SF Mono

在新的 CSS Fonts Module Level 4 草案中,还加入了以下几个新的通用字体族:

  • system-ui 使用平台默认的 UI 字体
  • emoji 用于 Emoji 表情
  • math 用于数学表达式
  • fangsong 仿宋体,如中易仿宋、方正仿宋

中文字体如何选择对应的通用字体族?

常用的中文字体主要包括“宋黑楷仿”四类,即宋体、黑体、楷体、仿宋体。

  • 宋体(Song):对应 serif
  • 黑体(Hei):对应 sans-serif
  • 楷体(Kai):对应 cursive
  • 仿宋体(Fang Song):对应 fangsong

在使用上,中文楷体/仿宋更接近于西文的斜体(italic)概念,用于与正文做区分。

以 Chrome 浏览器的默认的 UA 样式为例。

对于西文而言,默认是以下 CSS:

i, cite, em, var, address, dfn {
    font-style: italic;
}

对于中文,可能需要覆盖为:

i, cite, em, var, address, dfn {
    font-style: normal;
    font-family: 'FZZFangSong-Z02', 'FZZFangSong-Z02S', STFangsong, FangSong, serif;
}

中文字体 font-family 示例

其中涉及到部分方正字库旗下的字体,它们没有被包含在主流操作系统中。

/* 宋体 */
.song {
  font-family: 'Source Han Serif SC', 'Noto Serif CJK SC',
   'FZNewShuSong-Z10S', FZGFShuSong, 'FZShuSong-Z01', 'FZShuSong-Z01S',
   'Songti SC', STSong, NSimSun, SimSun, serif;
}

/* 黑体 */
.hei {
  font-family: 'Source Han Sans SC', 'Noto Sans CJK SC',
   'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
   'FZHei-B01', 'FZHei-B01S', 'Heiti SC', STHeiti, SimHei, sans-serif;
}

/* 楷体 */
.kai {
  font-family: 'FZKai-Z03', 'FZKai-Z03S', 'Kaiti SC', STKaiti, KaiTi, cursive;
}

/* 仿宋 */
.fang-song {
  font-family: 'FZZFangSong-Z02', 'FZZFangSong-Z02S',
   STFangsong, FangSong, fangsong;
}

相关规范

相关链接