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

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

Inconsistent css rendering between PC and Mac

css

cross-browser

icon-fonts