一文读懂Font文件

非专业程序员2025-09-19 11:27

一、引言

在开始阅读本文之前，推荐先阅读字符（Character）、字形（Glyph）、字体的区别理解基本概念。

如果你对字符与Unicode的相关概念还不理解，推荐阅读字符与编码

前文，我们介绍了字符（Character）、字形（Glyph）、字体的区别，这里我们再来实际分析一个字体文件中到底有什么，这有利于我们后续理解文字排版引擎的工作原理和流程。

macOS上系统字体路径一般为/System/Library/Fonts/，可以看到有文件后缀有ttc和ttf，二者有什么区别呢？

1）.ttf (TrueType Font)

ttf表示这是一个单字体文件，每个 .ttf 文件通常只对应一个字体样式（例如 Microsoft YaHei Regular）

2）.ttc (TrueType Collection)

ttc表示这是一个字体集合文件，内部可以包含多个 TrueType 字体（多个 .ttf 打包在一起），这些字体通常共享某些表（比如 glyph 轮廓、cmap），减少冗余，提高存储效率，常用于一个 Typeface 的多个变体（Regular, Bold, Italic, Light...）

上面提到了TrueType，与之对应的还有OpenType，二者其实都是字体类型标准，简单理解就是OpenType是TrueType的扩展，OpenType支持更多的特性，比如：连字、RTL、上下标等。

OpenType一般以otf为后缀，但也不能简单的根据文件名后缀区分二者，文件扩展名只是习惯，并不能完全说明内部格式，真正的区别还是要看字体表结构，比如OpenType有GSUB、GPOS、GDEF等扩展表。

下面，我们来真正解析一个字体文件，看里面有什么，可以通过如下命令行将字体解析成XML。

shell 复制代码 
# 对于ttf文件
ttx NewYork.ttf
# ttc文件是个字体集合，需要明确指明要提取哪个index的字体
ttx -y 0 Times.ttc

二、Font文件解析

我们以NewYork.ttf文件为例，如下是NewYork.ttf中的表

2.1 GlyphOrder

xml 复制代码 
<GlyphOrder>
  <GlyphID id="0" name=".notdef"/>
  <GlyphID id="1" name=".null"/>
  <GlyphID id="2" name="nonmarkingreturn"/>
  <GlyphID id="3" name="space"/>
  <GlyphID id="4" name="A"/>
  ...
</GlyphOrder>

GlyphOrder定义glyphID与glyphName的映射。

2.2 head

Font Header，存储一些全局信息；关注几个值：

xml 复制代码 
<head>
  <unitsPerEm value="2048"/>
  ...
</head>

1）unitsPerEm

字体表里的数值一般都很大（见后文），其单位并不是像素值，而是 em unit，<unitsPerEm value="2048"/>表示2048 units = 1 em = 设计的字高，比如当字体在屏幕上以 16px 渲染时，1 em = 16px，其他数值可按比例换算

2.3 hhea

Horizontal Typesetting Header，横向排版信息，关注几个值

xml 复制代码 
<hhea>
	<!-- MacOS一般使用hhea里的ascent、descent；OS_2表里还有几个ascent、descent，一般在Windows或专业设计上使用 -->
  <ascent value="1950"/>
  <descent value="-494"/>
  <lineGap value="0"/>
  <advanceWidthMax value="2818"/>
  <minLeftSideBearing value="-693"/>
  <minRightSideBearing value="-693"/>
  ...
</hhea>

1）ascent & descent

假设字体大小16，unitsPerEm如上为2048，则按比例换算：ascent = 1950/2048 * 16 ≈ 15.2，descent ≈ 494/2048 * 16 ≈ 3.8。

需要注意，OS_2表中也有ascent、descent的定义，这是因为不同平台会读取不同表中的ascent、descent，比如macOS、iOS一般使用hhea中的值，Windows一般使用OS_2表中的usWinAscent、usWinDescent，专业排版软件（如InDesign）一般用OS_2表中的sTypoAscender、sTypoDescender。

Q：对于同一个Font，ascent、descent的值是固定的吗？

这个问题的答案需要加定语，对于同一个Font，在同一个平台上，ascent、descent是固定的。

Q：为什么descent值是负数？

可以理解成规范，TrueType/OpenType的规范里，descent是负数，表示基线（baseline）以下延伸的高度。

2.4 maxp

xml 复制代码 
<maxp>
  <numGlyphs value="1811"/>
  ...
</maxp>

定义字体里 glyph 的数量，以及一些最大值参数。

2.5 OS_2

xml 复制代码 
<OS_2>
	<!-- 下标的大小和偏移 -->
  <ySubscriptXSize value="650"/>
  <ySubscriptYSize value="600"/>
  <ySubscriptXOffset value="0"/>
  <ySubscriptYOffset value="75"/>
  
  <!-- 上标的大小和偏移 -->
  <ySuperscriptXSize value="650"/>
  <ySuperscriptYSize value="600"/>
  <ySuperscriptXOffset value="0"/>
  <ySuperscriptYOffset value="350"/>

  <!-- 删除线的粗细和垂直位置 -->
  <yStrikeoutSize value="12"/>
  <yStrikeoutPosition value="620"/>

  <!-- 
  ulUnicodeRange表示字体支持的Unicode范围，用ulUnicodeRange1 ... ulUnicodeRange4 这 4 个 32 位字段来表示，总共 128 个 bit，对应 128 个 Unicode Block，如果某 bit = 1，表示字体支持该区块中的至少一些字符，
  映射表见：https://learn.microsoft.com/en-us/typography/opentype/spec/os2#ur
  -->
  <ulUnicodeRange1 value="10100001 00000000 00000010 11111111"/>
  <ulUnicodeRange2 value="00000010 00000000 00100000 01011110"/>
  <ulUnicodeRange3 value="00000000 00000000 00000000 00000000"/>
  <ulUnicodeRange4 value="00000000 00000000 00000000 00000000"/>

  <!-- 专业排版（比如 InDesign）一般使用sTypoAscender、sTypoDescender -->
  <sTypoAscender value="1950"/>
  <sTypoDescender value="-494"/>
  <sTypoLineGap value="0"/>

  <!-- Windows一般使用sTypoAscender、sTypoDescender -->
  <usWinAscent value="1950"/>
  <usWinDescent value="494"/>
  ...
</OS_2>

参见Apple文档，关注几个值：

1）ySubscriptXSize & ySubscriptYSize & ySubscriptXOffset & ySubscriptYOffset

下标的大小和偏移

2）ySuperscriptXSize & ySuperscriptYSize & ySuperscriptXOffset & ySuperscriptYOffset

上标的大小和偏移

3）yStrikeoutSize & yStrikeoutPosition

删除线的粗细和垂直位置

4）ulUnicodeRange1 & ulUnicodeRange2 & ulUnicodeRange3 & ulUnicodeRange4

ulUnicodeRange表示该字体支持的Unicode范围，用ulUnicodeRange1 ... ulUnicodeRange4 这 4 个 32 位字段来表示，总共 128 个 bit，对应 128 个 Unicode Block，如果某 bit = 1，表示字体支持该区块中的至少一些字符，映射表见：learn.microsoft.com/en-us/typog... 。

Windows系统通常用 ulUnicodeRange 来看一个字体是否支持某Unicode；macOS/iOS系统一般用 cmap 表（精确的字符映射），ulUnicodeRange只作为辅助信息；浏览器排版一般直接查 cmap，但 ulUnicodeRange 有时也用于字体 fallback 策略。

5）sTypoAscender & sTypoDescender & usWinAscent & usWinDescent

如前文所述，不同系统会取不同的值作为ascent、descent

2.6 hmtx

xml 复制代码 
<hmtx>
  <mtx name=".notdef" width="2048" lsb="199"/>
  <mtx name=".null" width="0" lsb="0"/>
  <mtx name="A" width="1244" lsb="-16"/>
  ...
</hmtx>

Horizontal Metrics，记录每个 glyph 的 advance width 和left side bearing。

简单理解排版引擎绘制字形的流程是：将字形放在当前点 + lsb 偏移位置进行绘制，画完后，将光标向右移动 advanceWidth，准备绘制下一个字形。

2.7 cmap

xml 复制代码 
<cmap>
  <tableVersion version="0"/>
  <cmap_format_4 platformID="0" platEncID="3" language="0">
  	<!-- A的Unicode code point是0x41 -->
    <map code="0x41" name="A"/><!-- LATIN CAPITAL LETTER A -->
    <map code="0x42" name="B"/><!-- LATIN CAPITAL LETTER B -->
    <map code="0x43" name="C"/><!-- LATIN CAPITAL LETTER C -->
    <map code="0x44" name="D"/><!-- LATIN CAPITAL LETTER D -->
    <map code="0x45" name="E"/><!-- LATIN CAPITAL LETTER E -->
    <map code="0x46" name="F"/><!-- LATIN CAPITAL LETTER F -->
    <map code="0x47" name="G"/><!-- LATIN CAPITAL LETTER G -->
    <map code="0x48" name="H"/><!-- LATIN CAPITAL LETTER H -->
    ...
  </cmap_format_4>
  ...
</cmap>

Character to Glyph Mapping，定义 Unicode code point → glyph ID 的映射，cmap表中能精确的查到该Font支持哪些Unicode。

2.8 glyf

xml 复制代码 
<glyf>
    <TTGlyph name="A" xMin="-16" yMin="0" xMax="1260" yMax="1444">
    <contour>
      <pt x="1086" y="213" on="1"/>
      <pt x="1113" y="137" on="0"/>
      <pt x="1161" y="50" on="0"/>
      <pt x="1219" y="9" on="0"/>
      <pt x="1260" y="1" on="1"/>
      <pt x="1260" y="0" on="1"/>
      <pt x="793" y="0" on="1"/>
      <pt x="793" y="1" on="1"/>
      <pt x="845" y="7" on="0"/>
      <pt x="897" y="54" on="0"/>
      <pt x="899" y="143" on="0"/>
      <pt x="874" y="213" on="1"/>
      <pt x="528" y="1200" on="1"/>
      <pt x="528" y="1200" on="1"/>
      <pt x="220" y="292" on="1"/>
      <pt x="184" y="186" on="0"/>
      <pt x="170" y="66" on="0"/>
      <pt x="224" y="11" on="0"/>
      <pt x="290" y="1" on="1"/>
      <pt x="290" y="0" on="1"/>
      <pt x="-16" y="0" on="1"/>
      <pt x="-16" y="1" on="1"/>
      <pt x="27" y="9" on="0"/>
      <pt x="89" y="59" on="0"/>
      <pt x="151" y="181" on="0"/>
      <pt x="193" y="297" on="1"/>
      <pt x="614" y="1444" on="1"/>
      <pt x="648" y="1444" on="1"/>
    </contour>
    <contour>
      <pt x="290" y="532" on="1"/>
      <pt x="294" y="544" on="1"/>
      <pt x="859" y="544" on="1"/>
      <pt x="860" y="532" on="1"/>
    </contour>
    <instructions/>
  </TTGlyph>
  ...
</glyf>

Glyph Data，真正的字形轮廓（矢量点、轮廓、控制点）；cmap 表负责把 Unicode 字符映射到 glyphID，而 glyf 表告诉渲染系统该 glyph 的具体形状。

2.9 name

xml 复制代码 
<name>
  <namerecord nameID="0" platformID="3" platEncID="1" langID="0x409">
    © 2017-2024 Apple Inc. All rights reserved.
  </namerecord>
  <namerecord nameID="1" platformID="3" platEncID="1" langID="0x409">
    .New York
  </namerecord>
  <namerecord nameID="2" platformID="3" platEncID="1" langID="0x409">
    Regular
  </namerecord>
  <namerecord nameID="3" platformID="3" platEncID="1" langID="0x409">
    .New York; 20.0d1e1; 2024-05-06
  </namerecord>
  <namerecord nameID="4" platformID="3" platEncID="1" langID="0x409">
    .New York
  </namerecord>
  <namerecord nameID="5" platformID="3" platEncID="1" langID="0x409">
    20.0d1e1
  </namerecord>
  <namerecord nameID="6" platformID="3" platEncID="1" langID="0x409">
    .NewYork-Regular
  </namerecord>
  ...
</name>

name表中定义的是字体名称、字体家族、PostScript Name、厂商信息等。

nameID对应的含义如下：

nameID 含义
0 Copyright notice
1 Font Family name（字体家族名，比如 New York）
2 Font Subfamily name（字重/样式，比如 Regular 、Bold）
3 Unique font identifier（唯一ID，通常包含厂商名+版本号）
4 Full font name（family + subfamily，比如 New York Regular）
5 Version string
6 PostScript name（唯一的、无空格的名字）
... ...

这里需要重点介绍下PostScript Name：PostScript Name是字体在一个系统里的唯一标识 ，是单个字符串，不允许有空格，一般是 FamilyName-StyleName 形式，比如：.NewYork-Regular，Helvetica-Bold，NotoSansCJKsc-Regular等。

在CoreText的API里，一般都要求传PostScript Name，比如：CTFontCreateWithName

2.10 GDEF

Glyph Definition Table，简单理解GDEF表就是是GPOS / GSUB的辅助表，比如GPOS和 GSUB需要知道「哪些字形是 mark、哪些能连接、哪些有变体」等信息，这些元数据就是放在GDEF 表里的。

2.11 GPOS

Glyph Positioning Table，控制字形的相对位置（如kerning、上下标等），比如「A + V」之间要减少间距，或者音标放在元音正上方等。

2.12 GSUB

Glyph Substitution Table，控制字形替换（连字、、阿拉伯文变体、直角引号换弯引号等），比如f + i → fi，'quoteleft' → '等。

2.13 HVAR & MVAR & avar & fvar & gvar...

这几个表是用于转换可变字体的，可变字体不在本文范围内，不再详述。

更多精彩内容欢迎关注🌍公众号：非专业程序员Ping

相关推荐
DaMu2 小时前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们，是时候该“在往前走一走”了！我们必须摆脱“画页面的”标签！
前端·gis
Asort2 小时前
JavaScript 从零开始（七）：函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer2 小时前
什么是 React 中的远程组件?
前端·react.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发？
前端·vue.js
知了一笑2 小时前
「AI」网站模版，效果如何？
前端·后端·产品
艾小码2 小时前
用了这么久React，你真的搞懂useEffect了吗？
前端·javascript·react.js
知觉2 小时前
实现@imput支持用户输入最多三位整数，最多一位小数的数值
前端
RoyLin2 小时前
TypeScript设计模式：状态模式
前端·后端·typescript
RoyLin2 小时前
TypeScript设计模式：观察者模式
前端·后端·typescript
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南0346个Nano-banana 精选提示词，持续更新中04Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践10解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题