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

我最近发现了一个字体(文件),在不同的操作系统中,它在一个范围内的位置似乎大不相同。如果一个熟悉字体的人知道这里到底出了什么问题,如果有这样的解决方案,我会非常感谢。

我在这里做了一支钢笔: https://codepen.io/jls-chris/pen/rmpee 它应该向您显示元素的基本设置:

<div class=“box”>
<div class=“wrapper”>
<span class=“value”>24%</span>
&L/DIV & GT;
</DIV>

字体字体{字体}
font-family:'影响lt-std';
src:url('https://sorry.font.is.licensed/impacttstd.otf')格式('opentype');
字体粗细:正常;
字体样式:普通;
}

框{
高度:163px;
宽度:259Px;
职位:相对;
Z指数:10;

//由GSAP设置
不透明度:1;
变换:矩阵(1,0,0,1,0,0);

//用于调试
背景色:浅蓝色;

包装器{
高度:计算值(163px-33px);
显示:Flex;
弯曲方向:立柱;
调整内容:中心;
项目对齐:居中;

//用于调试
背景色:浅绿色;

值{
font-family:'影响lt-std',无衬线;
字体大小:95px;
-Webkit字体平滑:亚像素抗锯齿;

//用于调试
文字装饰:下划线;
外形:1倍纯红;
}
}
}
< /代码> 

因为字体许可证不允许我分享,这里有几个图片:

在Windows(任何浏览器)上:



在Mac(任何浏览器)上:



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


跨距在两个OSE上都正确定位,并且尺寸正确,但基线在两个OSE上的位置似乎完全不同。我测试了一些其他字体,但无法复制。


是否有人知道这种字体可能有什么问题/损坏,以及是否有修复方法?

我在这里做了一支笔: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上,文本显然没有如我所期望的那样居中。

跨距在两个OSE上都正确定位,并且尺寸正确,但基线在两个OSE上的位置似乎完全不同。我测试了其他几种字体,但无法复制。

是否有人知道这种字体可能有什么问题/损坏,以及是否有修复方法?