求助：JS加载的OTF格式字体垂直未居中问题排查

问题概况 #

通过JavaScript动态加载Suisse Int'l的OTF字体后，发现无嵌套元素的简单<p>标签内符号无法垂直居中，明显高于基线；但使用官网下载的TTF试用版时，符号能正常居中。尝试用vertical-align搭配display: inline-block（注：原描述的inline-clock应为笔误）、line-height调整均无效，ascent-override能修复问题但浏览器兼容性太差。

加载字体的代码如下：

const font = {
    family: `Suisse Int'l`,
    style: 'normal',
    display: 'fallback',
    weight: 500,
    src: '/assets/fonts/SuisseIntl-BlackItalic.otf',
    locale: 'Suisse',
};

const { family, src, ...descriptor } = font;
const fontFace = new FontFace(family, `url(${src})`, {
    ...descriptor,
    weight: descriptor.weight.toString(),
});

// 注：原代码存在语法错误，已修正变量重复声明与括号闭合问题
const loadedFont = await fontFace.load().then((loadedFontFace) => {
    document.fonts.add(loadedFontFace);
    return loadedFontFace;
});

document.documentElement.style.setProperty('--font-family', `${font.family}, sans-serif`);

核心原因推测 #

• OTF字体度量参数异常：OTF与TTF虽同属TrueType轮廓字体，但部分OTF的ascent（上升高度）、descent（下降高度）、x-height等排版度量参数定义不符合标准，导致浏览器计算垂直布局时偏离预期。官网的TTF版本大概率是经过规范修正的。
• 字体文件导出缺陷：设计师提供的OTF可能在导出时未正确配置基线、行高相关元数据，或者字形轮廓存在偏移，直接导致渲染时基线定位错误。
• 浏览器解析差异：不同浏览器对OTF字体的元数据（尤其是OS/2、hhea表）解析逻辑存在差异，当字体参数不规范时，容易触发布局偏差。

排查与解决方法 #

1. 检查并修正字体元数据

   • 用FontForge、Glyphs等字体编辑工具打开问题OTF，查看OS/2表的sTypoAscender、sTypoDescender、usWinAscent、usWinDescent，以及hhea表的ascent、descent参数，对比官网TTF的对应数值，修正差异项，重点确保基线位置与字形垂直中心匹配。

2. 调整FontFace配置

   • 参考TTF版本的度量值，在FontFace的配置中显式声明ascent和descent参数，兼容性比ascent-override更好：

     const fontFace = new FontFace(family, `url(${src})`, {
         ...descriptor,
         weight: descriptor.weight.toString(),
         ascent: 1050, // 替换为TTF字体的实际ascent数值
         descent: -250  // 替换为TTF字体的实际descent数值
     });
     

3. 转换字体格式

   • 用FontForge、Transfonter等工具将问题OTF转成TTF格式，测试转换后的文件是否能正常垂直对齐。如果可行，优先部署TTF版本，避开OTF的解析问题。

4. CSS临时兜底

   • 若无法修改字体文件，可针对该字体设置专属的line-height和transform微调：

     p {
         line-height: 1.15; /* 根据实际显示调整 */
         transform: translateY(-3%); /* 微小偏移修正垂直位置 */
     }
     

   • 这个方法需要根据具体场景调参，属于临时修复方案。

内容的提问来源于stack exchange，提问作者Роман Салдан