Firefox与Chrome自定义字体文本位置差异的非浏览器特定解决方案咨询

你遇到的问题本质是不同浏览器渲染引擎（Gecko vs Blink）对自定义字体的字体度量参数解析不一致，导致文本在固定line-height容器内的垂直位置偏移。以下是无需浏览器特定padding的通用解决方法：

1. 改用Flexbox实现垂直居中 #

直接通过Flex布局的对齐能力绕过line-height的渲染差异，这是最可靠的方案：

.project-item {
  display: flex;
  align-items: center;
  min-height: 26.88px; /* 保持原容器高度要求 */
}

Flex的align-items: center会基于文本的实际渲染高度进行垂直居中，不受浏览器对line-height、字体度量的解析差异影响，能在各浏览器中保持一致的对齐效果。

2. 修正自定义字体的度量信息 #

问题根源可能是你的自定义字体文件的OS/2表度量参数不标准（比如sTypoAscender、sTypoDescender、sTypoLineGap值设置不合理），导致不同浏览器计算文本位置时出现偏差：

• 使用FontForge、Glyphs等字体编辑工具打开字体文件，检查并调整OS/2表的度量值，让字体的 ascent/descent 符合通用规范；
• 确保字体文件包含完整的度量数据，避免浏览器 fallback 到默认的度量计算逻辑。

3. 用font-size-adjust统一渲染比例 #

font-size-adjust属性可以强制字体的x-height与指定比例匹配，减少不同引擎下的垂直偏移：

.project-item {
  font-size-adjust: 0.5; /* 具体值需根据你的字体x-height调整，通常在0.4-0.6之间 */
}

这个属性会让浏览器自动调整字体大小，保持x-height的一致性，间接让文本的垂直对齐更统一。

4. 替换固定line-height为min-height+padding #

放弃固定line-height，改用min-height控制容器高度，配合上下padding实现居中：

.project-item {
  min-height: 26.88px;
  padding: 3px 0; /* 根据实际渲染效果微调上下padding */
  line-height: normal;
}

让浏览器根据字体自身的度量计算行高，再通过padding微调，这种方式的跨浏览器差异远小于固定line-height的方案。

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