笔者在某个需求实现中使用了 opentype.js 这个库，现将一些使用过程记录在本篇文章中。
opentype.js 是一个 JavaScript 库，支持浏览器和 Node.js，可以解析字体文件，拿到字体信息，并提供一些渲染方法。
虽然名字叫做 opentype.js，但除了可以解析 OpenType，也可以解析 TrueType。
支持常见的字体类型，比如 WOFF, OTF, TTF，像是 AutoCAD 的 shx 就不支持了。
需要注意的是，woff2 字体是用 Brotli 压缩过的文件，需要额外用解压库做解压。 opentype.js 没有提供对应解压 Brotli 的能力，倒是提供了 Inflate 解压能力，所以可以解析 woff 字体。
opentype.js 解析字体
1 // 从 URL 下载字体 2 const response: HttpClientResponse = await makeHttpRequest(url); 3 4 if (!response.status || response.status !== 200) { 5 handleError(`HTTP error! status: ${response.status}`); 6 } 7 // 加载文件字体为二进制数据，然后使用 opentype.js 解析 8 const buffer = response.data as Buffer; 9 const arrayBuffer = buffer.buffer.slice( 10 buffer.byteOffset, 11 buffer.byteOffset + buffer.byteLength 12 ); 13 const font = await opentype.parse(arrayBuffer); 14
这个 font 这个对象保存了很多属性，比如所有的 glyph（字形）、一些 table（表）、字体的信息（字体名、设计师等）等等。
获取字形（glyph）信息
字形（glyph）是一个用于在字体排印中表示一个或多个字符的视觉表征的术语。
1const glyph = font.charToGlyph('A') 2
有了字形，我们就能拿到某个或者某段文本字符串渲染所需要的一些关键信息（width、height、ascender、descender）：
1/** 2 * 测量文本宽度 3 * @param text 文本 4 * @param fontUrl 字体URL 5 * @param fontSize 字体大小 6 * @returns 宽度、高度以及字体的上下边界信息 7 */ 8 async measureText( 9 text: string, 10 fontUrl: string, 11 fontSize: number 12 ): Promise<FontMetrics> { 13 // 1. 加载字体文件（opentrue 14 const font = await this.loadFontFromUrl(fontUrl); 15 16 // 2. 计算缩放比例：将字体的原始单位（unitsPerEm）转换为实际像素大小 17 // font.unitsPerEm 通常是 1000 或 2048，表示字体设计时的基准网格 18 // fontSize 是你想要渲染的大小（比如 32px） 19 // 所以 scale = fontSize / unitsPerEm，用于把字体的“逻辑单位”转为“像素” 20 const scale = fontSize / font.unitsPerEm; 21 22 // 3. 将字符串转换为字形（glyph）数组 23 // 每个字符可能对应一个或多个 glyph（比如连字 "fi"） 24 // glyphs 是字体中实际的图形对象，包含路径、宽度等信息 25 const glyphs = font.stringToGlyphs(text); 26 27 // 4. 计算文本总宽度 28 let width = 0; 29 glyphs.forEach((glyph, i) => { 30 // 如果不是第一个字符，加上前一个字符和当前字符之间的“字距调整”（kerning） 31 // kerning 是为了让某些字符组合（如 "A" 和 "V"）看起来更美观，自动缩小间距 32 if (i > 0) { 33 width += font.getKerningValue(glyphs[i - 1], glyph); 34 } 35 36 // 加上当前字形的“前进宽度”（advanceWidth） 37 // 注意：这不是字形的绘制宽度，而是光标移动的距离（包含右侧空白） 38 width += glyph.advanceWidth; 39 }); 40 41 // 5. 返回测量结果（全部乘以 scale 转为像素单位） 42 return { 43 // 文本总宽度（含 kerning） 44 width: width * scale, 45 46 // 文本总高度 = ascender（上部） - descender（下部） 47 // ascender 是基线以上部分（如 "b", "h" 的顶部） 48 // descender 是基线以下部分（如 "g", "y" 的底部） 49 height: (font.ascender - font.descender) * scale, 50 51 // 基线以上的高度（正数），可用于垂直对齐计算 52 ascender: font.ascender * scale, 53 54 // 基线以下的高度（通常是负数，但这里保留原值） 55 descender: font.descender * scale, 56 }; 57 } 58
获取文字轮廓（path)
getPaths 计算得到一段字符串中每个 glyph 的轮廓数据。 注意：传入的y坐标确实表示的是基线坐标（baseline），而不是字符的顶部或底部。
1const textPaths = font.getPaths(text, x, y, fontSize); 2
textPaths 是一个 path 数组。 字符串长度为 6，产生了 6 个 glyph（字形），所以一共有 6 个 path 对象。 形状的表达使用了经典的 SVG 的 Path 命令，对应着 command 属性。 TrueType 字体的曲线使用二阶贝塞尔曲线（对应 Q 命令）；而 OpenType 支持三阶贝塞尔曲线（对应 C 命令）。
转成真正能用的path路径，需要调用OpenType.js 暴露的另一个方法：
1textPaths.toPathData(2); 2
基于生成的 Path 路径与字形信息，我们便能实现文本在某种字体下的 SVG 绘制了，剩下的步骤待读者自行探索。
《opentype.js 使用与文字渲染》 是转载文章，点击查看原文。
