PC 和 Mac 之间的 css 渲染不一致

Question

我制作了自己的图标字体，并且在 OS X 的任何浏览器中看起来都很完美：

但在 MS Windows PC 的任何浏览器中显示为垂直偏移：

在最后一个示例中（来自 PC），字形出现在其元素框下方（在其自然框之外）。

是span 元素：

<span class="sin-avatar circle s s-pluma-6"></span>

带有::before 伪元素：

.s-pluma-6::before {
    content: "\EA2F";
}
.s::before {
    display: inline-block;
    font-family: iconfont;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

这里有一个活生生的例子（向下滚动）： https://stage.soux-calvo.online/

我快疯了，用多种方式修改 CSS 都没有成功。

任何建议将不胜感激。谢谢。

Answer 1

我发现了错误。它在字体构建过程中（使用 gulp 草图）。一些图标，我不知道为什么，破坏了字体。删除该图标，修复错误。