字体渲染问题（MAC 与 Windows）答案

【问题标题】：Font rendering issue (MAC vs Windows)字体渲染问题（MAC 与 Windows）
【发布时间】：2014-05-19 13:46:59
【问题描述】：

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

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

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

查看我的截图（Chrome MAC 与 Chrome Windows）：

Chrome MAC：

Chrome Windows：

你们知道什么可以解决这个问题吗？

【问题讨论】：

请提供您问题的玩具示例，以便我们进行测试和调试，例如在jsfiddle.net.
@Cedric 你可以访问 beta.dimensus.nl 页面
@Bram 一个 JSFiddle 链接以及您问题中的代码会更好，因为当您的问题得到解决时，您的 URL 将与该问题无关。
好的，请稍等。我会做一个 JSFiddle :)

标签： css fonts font-face html-entities

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

【讨论】：