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