Chromium与Webkit浏览器中可变字体`opsz`值与px映射差异问题咨询及解决方向问询

你不是一个人遇到这个问题！可变字体的opsz轴在不同浏览器的表现差异确实是一个已知的兼容性问题，不少前端开发者都反馈过类似情况。

问题普遍性说明 #

这个差异本质上是不同浏览器对可变字体opsz轴的映射逻辑不一致导致的：

• Safari和Firefox会严格按照font-size的px值自动映射到opsz数值；
• Chromium内核的浏览器（比如Chrome）则可能优先使用字体文件内置的opsz默认值，或者采用了不同的比例换算规则，尤其是当字体本身的opsz轴范围设置比较特殊时，更容易出现数值偏差。目前在Chromium的官方bug跟踪平台上，也有不少关于这个问题的讨论和反馈。

解决思路与方案 #

1. 确认开启自动光学尺寸开关 #

首先确保你的CSS中已经显式开启了自动光学尺寸适配（虽然这是默认值，但有时会被全局样式重置）：

body {
  font-optical-sizing: auto;
}

这是浏览器自动调整opsz的基础前提，但仅靠它可能无法解决Chrome的差异问题，需要结合其他方案。

2. 用JavaScript动态同步font-size与opsz #

如果想要保持自动适配的同时解决跨浏览器一致性，可以通过JS监听字体大小变化，自动计算并设置对应的opsz值：

function syncOpticalSize() {
  const targetElement = document.querySelector('body');
  // 获取当前计算后的字体大小
  const currentFontSize = parseFloat(getComputedStyle(targetElement).fontSize);
  // 同步设置opsz值
  targetElement.style.fontVariationSettings = `"opsz" ${currentFontSize}`;
}

// 页面加载时初始化
syncOpticalSize();
// 监听窗口 resize（如果有响应式字体调整）
window.addEventListener('resize', syncOpticalSize);
// 其他动态修改字体大小的场景，记得调用syncOpticalSize()

这样就不用每次手动修改font-size时都同步调整opsz，保留了自动适配的特性。

3. 检查字体文件的opsz轴定义 #

部分可变字体的opsz轴默认值、范围设置可能存在特殊性，比如有些字体把opsz的默认值设为32，这会导致Chrome优先使用这个默认值，而忽略font-size的映射。你可以用字体编辑工具（如FontLab、Glyphs）查看字体的opsz轴参数，确认其最小值、最大值和默认值是否符合预期。如果是字体本身的问题，可能需要调整字体文件的轴设置。

4. 针对Chromium浏览器做单独兼容 #

可以利用CSS的@supports特性检测，针对Chromium内核浏览器单独设置opsz值：

body {
  font-optical-sizing: auto;
}

/* 仅针对Chromium浏览器调整opsz */
@supports (-webkit-appearance: none) and (not (color: color(display-p3 1 1 1))) {
  body {
    font-variation-settings: "opsz" 16;
  }
}

注意：这种特性检测的规则可能会随着浏览器版本更新变化，需要定期验证有效性。

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