html - Mac 和 Windows 之间 中的字体定位差异

Question

我最近遇到了一个字体(文件)，它在不同操作系统上的跨度内似乎定位大不相同。如果熟悉字体的人知道这里到底出了什么问题，并且是否有针对此类问题的修复或解决方法，我将不胜感激。

我在这里做了一支笔:https://codepen.io/jls_chris/pen/rQmpEE它应该向您展示元素的基本设置:

<div class="box">
  <div class="wrapper">
    <span class="value">24%</span>
  </div>
</div>

@font-face {
  font-family: 'Impact LT Std';
  src: url('https://sorry.font.is.licensed/ImpactLTStd.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.box {
  height: 163px;
  width: 259px;
  position: relative;
  z-index: 10;

  // Set by gsap
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);

  // For debugging
  background-color: lightblue;

  .wrapper {
    height: calc(163px - 33px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    // For debugging
    background-color: lightgreen;

    .value {
      font-family: 'Impact LT Std', Sans-Serif;
      font-size: 95px;
      -webkit-font-smoothing: subpixel-antialiased;

      // For debugging
      text-decoration: underline;
      outline: 1px solid red;
    }
  }
}

由于字体许可证不允许我分享它，这里有几张图片:

在 Windows 上(任何浏览器):

在 Mac 上(任何浏览器):

在 Windows 上，一切看起来都是正确的，但在 Mac 上，文本显然没有像我期望的那样居中。

跨度在两个操作系统上都正确定位并且具有正确的尺寸，但似乎基线在两个操作系统上的定位完全不同。我测试了其他几种字体，但无法重现。

有人知道这种字体可能有什么问题/损坏吗？是否有修复方法？

Answer 1

elveti 链接了以下帖子(在评论中，如果可能的话，我会接受该评论作为解决方案):Font Rendering / Line-Height Issue on Mac/PC (outside of element)其中概述了相同的问题并包含了解决方案。

遗憾的是，FontSquirrel 不是一个选项，因为它会阻止 Adob​​e 字体。但是我使用 FontForge 编辑了字体，正如 Luke 在帖子中提到的:https://stackoverflow.com/a/38508202/1084239

对我来说，没有一个复选框被选中，但“Win ...”指标与其他指标不同。我将“Win Ascent”和“Win Descent”值复制到相应的“Typo”和“HHead”字段中，因为我的问题是 mac 显示字体不正确(并且未选中所有复选框)。使用默认设置将字体导出为 ttf 并忽略任何警告后，它生成的字体最终在 mac 和 windows 上都能正常工作。