度量图怎么读
最后更新 2026-11-02
- 度量
- metrics
- unitsPerEm
- 基线
- ascender
- descender
- viewBox
- em 方框
- 百分比
EN中文
本页目录
检查器的度量面板画的是一个字形在一个 em 方框里的位置，加上字体声明的各种边界。它不是字体好不好看的评价图，而是这一行要留多少空间的施工图。
先说坐标：字体单位，向上为负
- 一切数值都是字体单位（
unitsPerEm分之一），不是像素； - 基线是 y = 0；
- 向上是负（这是 SVG 的方向）。
所以一条 ascender = 800（字体单位，向上）的线，在 SVG 里画成 y = -800。图上看起来在上面，数值是正的，这是同一个东西的两种说法。
因为不涉及像素，图与字号无关：12px 和 120px 画出来是同一张图。缩放全交给 SVG 的 viewBox。
九组图层
| 图层 | 画什么 | 来源 |
|---|---|---|
| Baseline | 基线（y = 0） | —— |
| hhea | 上伸、下伸 | hhea.ascender / descender |
| OS/2 typo | 排版用上下伸 | OS/2.sTypoAscender / sTypoDescender |
| OS/2 win | Windows 裁切边界 | OS/2.usWinAscent / usWinDescent |
| Cap height | 大写高度 | OS/2.sCapHeight |
| x-height | 小写 x 高度 | OS/2.sxHeight |
| Underline | 下划线位置 | post.underlinePosition |
| Advance / side bearings | 竖直的三条 | 字形自己的 advanceWidth 与 leftSideBearing |
| Glyph bounding box | 字形实际占的框（ink） | 字形包围盒 |
图层可以单独关掉——关掉只是让图清爽，数值表照样保留。
unitsPerEm = 1000 举例。右侧是原始字段值（注意符号方向，下伸和下划线都是负数），底部是三条横方向的线；灰框是字形墨迹（ink），它和 advance 不是一回事——中间差的正是右侧边距。
竖直的三条线
- 原点（x = 0）：字形的起点；
- advance：这个字形占的水平距离，下一个字从这里开始；
- lsb（左侧边距）：从原点到字形墨迹的距离；
- 1 em：x =
unitsPerEm那条线，用来对照这个字形占了一 em 的多少。
右侧边距（rsb）在图上不画线，但表里有：advance − lsb − 墨迹宽度。
数值表
表里每一行都给出字体单位与占一 em 的百分比（百分比 = 值 ÷ unitsPerEm）。百分比比绝对值更有用：不同字体的 unitsPerEm 可能是 1000 或 2048，绝对值没法直接比。
行包括：
- 基线与三组上下伸（hhea / typo / win）及各自的 line gap；
- cap height、x-height；
- 下划线位置与粗细；
unitsPerEm；- 字形的 advance、lsb、rsb；
- 墨迹的左右上下边界与高度。
三个符号方向，别读反
| 值 | 常见值 | 含义 |
|---|---|---|
hhea.descender |
负数 | 基线以下多少 |
OS/2.usWinDescent |
正数 | 向下多少，不是坐标 |
post.underlinePosition |
负数 | 下划线顶部在基线以下多少 |
post.italicAngle |
负数 | 向右倾 |
本站已经在 shared/src/fonts/metrics.ts 一处把这些统一成向上为负，组件里不再翻第二次。你看到的线是统一的，表里给的是原始值——所以表里出现正数不代表图画错了。
两套 y 方向
这是实现上最容易出错的地方，也是你排查图反了时的第一嫌疑：
- 字形轮廓（SVG path）是 SVG 方向：y 向下；
- 字形包围盒与度量值是字体方向：y 向上。
画框时必须把 top 与 bottom 互换，否则整个框会翻过来。本站把这类换算收敛在一个文件里，就是为了避免某一条线独自翻了个身。
为什么有些字符画不出来
如果字形索引是 0（.notdef，豆腐块），说明这个字体没有这个字。这时图上的度量是 .notdef 的，不代表任何真实字形——面板会直接说字体里没有这个字符，而不是画一张有意义的图。
延伸阅读
shared/src/fonts/metrics.ts（度量模型与注释）- OpenType 规范：
hhea、OS/2、post - 本站：head、hhea 与 post