css - 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 sketch)。一些图标，我不知道为什么，破坏了字体。删除该图标，错误修复。