【发布时间】：2019-04-23 00:46:27
【问题描述】：
我最近发现了一种字体（-file），它在不同操作系统的跨度内的位置似乎大不相同。如果熟悉字体的人知道这里到底出了什么问题，并且如果有类似的修复或解决方法，我将不胜感激。
我在这里做了一支笔：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 上，文本显然没有像我预期的那样居中。
跨度在两者上都正确定位并且具有正确的尺寸，但看起来基线在两个操作系统上的定位完全不同。我测试了其他几种字体，但无法重现。
有人知道这种字体可能有什么问题/损坏以及是否可以修复？
【问题讨论】：
-
这听起来像是字体渲染问题，或者可能只是行高问题。
.value { line-height: 1; }能解决什么问题吗？ -
@elveti 不，遗憾的是这没有帮助。
-
哦，太糟糕了。那么问题可能出在字体本身。您可以尝试这里提到的解决方案：stackoverflow.com/questions/11726442/… 特别是 FontSquirrel WebfontGenerator 过去曾帮助我处理过类似的情况。 Squirrel 将您的 .otf 字体转换为所有其他类型（ttf、woff），以使其尽可能跨浏览器兼容。但是他们将许可字体列入黑名单，所以我不知道它是否适合您。抱歉，我无法为您提供更简单/更好的解决方案
-
@elveti 哦，这个问题看起来非常非常相似。遗憾的是，该字体在 FontSquirrel 上被列入黑名单，所以我必须看看我能做什么。