我制作了自己的图标字体,在 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 都没有成功。
任何建议将不胜感激。谢谢。
最佳答案
我发现了错误。它在字体构建过程中(使用 gulp sketch)。一些图标,我不知道为什么,破坏了字体。删除该图标,错误修复。
关于css - PC 和 Mac 之间的 css 渲染不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43456672/