字体渲染问题（MAC vs Windows）

Question

我有一个网站，我在其中使用css @ font-face声明。 然后，在我的html中，我使用html-entities来显示矢量图像。

这适用于Mac上的所有webbrowser（Chrome，Firefox，Safari，Opera）。 它也适用于Windows中的相同浏览器（包括IE9 +）。

但是，在Windows中的浏览器上，图标顶部有填充。

查看我的sreenshots（Chrome MAC与Chrome Windows）：

Chrome MAC

Chrome Windows

你们知道能解决这个问题吗？

Answer 1

而不是

.header #link_home_home a, .header #link_search a {
width: 100%;
height: 100%;
display: block;
padding: 18px 20px 15px 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-top: 7px;
}

尝试：

 .header #link_home_home a, .header #link_search a {
    width: 100%;
    height: 100%;
    display: block;
    margin: 18px 20px 15px 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 7px;
    }

填充最有可能具有不同的渲染。如果这不起作用并且您想要一个更清洁的解决方案，您应该使用css上方的css重置样式表。看看这里：http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Answer 2

我找到了解决方案。问题似乎出现在Entypo字体文件中。角色似乎有不同的高度，角色顶部和底部有不必要的空白区域。

Mac确实删除了这些空格，Windows没有。

我找到了一个没有这些问题的新字体文件。感谢您的反馈。