Mac平台Firefox与Chrome的Typekit字体渲染差异问题

问题概述 #

Mac系统下使用Typekit的Area Normal字体时，Chrome与Firefox出现显示差异：Firefox中文字下方存在0.58px的额外间隙，导致设置了17px上下内边距的红色容器里文字无法垂直居中。调整行高会同时改变两款浏览器的显示效果，但Firefox的底部间隙仍无法消除。

具体修复方案 #

1. 针对Firefox单独微调位置 #

利用Firefox专属的CSS特性检测，通过transform抵消底部间隙，不影响Chrome的显示：

@-moz-document url-prefix() {
  .text-container {
    transform: translateY(0.58px);
  }
}

2. 强制行高配合垂直对齐 #

将行高设为1，结合vertical-align: middle减少渲染差异，再配合容器内边距调整居中：

.text-container {
  line-height: 1;
  vertical-align: middle;
}

3. 统一字体加载渲染行为 #

在@font-face或Typekit引入代码中设置font-display，避免字体加载过程中fallback字体的影响：

@font-face {
  font-family: "Area Normal";
  src: url("your-font-path.woff2") format("woff2");
  font-display: swap;
}

4. 负内边距抵消间隙 #

如果上述方法无效，可针对Firefox给文字元素设置负底部内边距：

@-moz-document url-prefix() {
  .text-container {
    padding-bottom: -0.58px;
  }
}

原因说明 #

这类差异源于Chrome（Blink引擎）与Firefox（Gecko引擎）对字体度量参数（如上升值、下降值）的解析逻辑不同，导致文字在容器内的垂直位置计算出现偏差。优先使用特性检测的方案，既能精准修复Firefox的问题，又不会破坏Chrome的正常显示。

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