如何获取字体字形度量数据以在UI中展示？

1. 应使用哪种字体格式来获取此类字形数据？ #

优先选择 TTF（TrueType） 或 OTF（OpenType） 格式：

• 这两种是标准的OpenType基础格式，包含完整的字体表结构，直接就能提取ascender、cap-height、x-height这类全局度量属性，以及单个字形的细节数据。
• WOFF/WOFF2是Web专用的压缩字体格式，虽然可以解压还原为OpenType结构，但多了一步解压操作，效率和直接解析TTF/OTF相比稍低。
• SVG字体不推荐，它基于矢量图形描述，没有标准化的字体度量表结构，很难准确提取这类专业的字形数据。

2. opentype.js的Glyph对象是否涵盖所需的全部数据？ #

不涵盖。

• Glyph对象仅提供单个字形的局部属性（比如advanceWidth、边界xMin/xMax/yMin/yMax），但ascender、cap-height、x-height属于字体全局度量属性，需要从opentype.js的Font对象中获取：
  • font.ascender：字体的上升线高度
  • font.descender：字体的下降线高度
  • font.xHeight：小写字母x的高度
  • font.capHeight：大写字母的高度（部分字体有定义）
• 如果字体未在全局定义cap-height，也可以通过遍历'A'这类标准大写字母的字形，计算yMax - yMin得到近似值，但优先以字体表的全局定义为准。

3. 有没有更适合的JS库处理这类需求？ #

有几个实用的库可选：

• fontkit：功能更全面，支持解析几乎所有主流字体格式（TTF/OTF/WOFF/WOFF2），能直接读取全局度量属性和字形细节，API设计也更贴近字体底层结构。
• 其实opentype.js本身就足够覆盖需求，只是需要注意使用Font对象而非仅Glyph对象。
• Web环境下也可以用浏览器的FontFace API结合Canvas间接计算，但这种方法依赖渲染，精度和直接解析字体文件相比有差距。

4. 无合适JS库时，需读取哪些底层字体属性？ #

需要解析OpenType字体的核心表结构：

• hhea表：核心度量表，直接存储ascender、descender、xHeight、capHeight（若存在）、lineGap等全局属性，是获取这类数据的关键。
• head表：包含字体的单位、坐标边界、版本等基础信息，用来将字体内部的设计单位转换为实际像素值。
• glyf表：存储单个字形的轮廓数据，当hhea表未定义cap-height等属性时，可通过提取标准字形（如'A'、'x'）的轮廓坐标计算对应高度。
• cmap表：仅负责字符到字形索引的映射，用来定位特定Unicode字符对应的字形，但和ascender这类度量数据本身无关。

内容的提问来源于stack exchange，提问作者Lance Pollard