Safari浏览器font-weight:400显示过粗问题技术求助

问题现象 #

自托管的自定义字体Fakt在Safari浏览器中，font-weight:400的文本显示明显过粗，视觉效果接近500或600权重，但在Chrome等其他浏览器中显示正常。

Chrome显示效果 #

Safari显示效果 #

当前字体声明代码 #

@font-face {
  font-family: Fakt;
  font-display: swap;
  font-weight: 500;
  src: url('./fonts/FaktMedium.woff2') format('woff2');
}

@font-face {
  font-family: Fakt;
  src: url('./fonts/Fakt-Bold.woff2');
  font-display: swap;
  font-weight: bold;
}

@font-face {
  font-family: Fakt;
  font-display: swap;
  font-weight: 400;
  src: url('./fonts/FaktNormal.woff2') format('woff2');
}

@font-face {
  font-family: Fakt;
  font-display: swap;
  font-weight: 300;
  src: url('./fonts/Fakt-Blond.woff2') format('woff2');
}

@font-face {
  font-family: Fakt;
  font-display: swap;
  font-weight: 300;
  font-style: italic;
  src: url('./fonts/Fakt-BlondItalic.woff2') format('woff2');
}

目标文本应用样式 #

font-family: fakt, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
font-feature-settings: normal;
font-size: 16px;
font-style: normal;
font-synthesis-small-caps: none;
font-synthesis-style: none;
font-synthesis-weight: none;
font-variant-ligatures: none;
font-weight: 400;
height: 22px;
letter-spacing: normal;
line-height: 22.4px;
text-rendering: optimizelegibility;
text-transform: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0px;

排查与解决思路 #

• 检查字体元数据：Safari对字体元数据解析更严格，可能FaktNormal.woff2的OS/2表中usWeightClass字段被错误标记为500而非400，用FontForge、Glyphs等工具打开字体文件修正该字段。
• 统一font-weight数值写法：将声明中的font-weight: bold替换为700，同时补充Fakt-Bold.woff2的format('woff2')声明，避免Safari权重匹配混淆：

  @font-face {
    font-family: Fakt;
    src: url('./fonts/Fakt-Bold.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
  }
  

• 调整Safari专属渲染属性：修改-webkit-font-smoothing和text-rendering值，避免optimizelegibility触发额外加粗逻辑：

  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .target-text {
      -webkit-font-smoothing: subpixel-antialiased;
      text-rendering: optimizeSpeed;
    }
  }
  

• 重新导出标准字体文件：用Google的woff2_compress工具重新压缩FaktNormal字体，确保文件格式无损坏，符合浏览器兼容标准。
• 显式指定字体拉伸属性：在400权重的@font-face声明中添加font-stretch: normal，防止Safari自动拉伸字体导致视觉加粗：

  @font-face {
    font-family: Fakt;
    font-display: swap;
    font-weight: 400;
    font-stretch: normal;
    src: url('./fonts/FaktNormal.woff2') format('woff2');
  }
  

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