Adobe XD与浏览器中Condensed字体的差异及解决方案咨询

• 字体厂商的非标准化实现：CSS规范里的font-stretch百分比是理想定义，但实际字体厂商对“Condensed”这类字宽的实现没有严格遵循这个比例。Nunito Sans的Condensed变体本身的实际宽度比例就不是75%，而是更接近84%——XD读取的是字体文件原生的字宽数据，而你用MDN的75%是在缩放普通版字体，自然匹配不上。
• 字体变体的调用逻辑差异：XD里的“Condensed”大概率是调用了Nunito Sans专门的窄体字体文件（比如Nunito Sans Condensed），而非通过缩放普通字体实现。如果浏览器里只加载了常规版Nunito Sans，用font-stretch:75%是对常规字体进行拉伸/压缩，和原生窄体的字形细节、字宽比例都会有区别。
• 渲染引擎的计算偏差：Adobe XD的渲染引擎和浏览器（Chrome、Firefox等）的文字渲染逻辑不同，对字体的字间距、字符宽度的计算有细微差异，即使参数一致，视觉效果也会有偏差。

• 直接加载原生窄体字体：不要用font-stretch模拟，而是在项目中引入Nunito Sans的Condensed变体字体文件。比如通过@font-face声明：

  @font-face {
    font-family: 'Nunito Sans Condensed';
    src: url('nunito-sans-condensed.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
  

  然后直接指定font-family: 'Nunito Sans Condensed'，这样浏览器调用的是和XD一致的原生字体，效果完全匹配。
• 提取字体的实际字宽参数：用FontForge等字体编辑工具打开Nunito Sans Condensed的字体文件，查看它的wdth（字宽）轴数值或者实际字宽比例，把这个数值作为font-stretch的精确值，替代MDN的规范比例。
• 利用可变字体的轴参数：如果Nunito Sans是可变字体，它会包含wdth字宽轴。直接通过font-variation-settings指定对应轴的数值，比如：

  font-variation-settings: "wdth" 84; /* 数值根据字体实际轴范围调整 */
  

  这个数值可以从字体的元数据中获取，能精准匹配XD里的字宽效果。
• 定量视觉对比调整：把XD里的文字截图和浏览器渲染的文字放在同一画布（比如Photoshop），测量单个字符的宽度（比如字母“m”的宽度），逐步调整font-stretch的百分比，直到两者宽度完全一致——这是基于实际测量的精准调整，而非盲目猜测。

内容的提问来源于stack exchange，提问作者Jer.Hazelnut