@font-face 质量问题答案

【问题标题】：@font-face quality issues@font-face 质量问题
【发布时间】：2012-09-21 15:40:56
【问题描述】：

我在 Photoshop 中设计了一个网站，并且对结果很满意，所以我开始编写它。但是，我在字体渲染方面遇到了一些麻烦。与 Photoshop 相比，该字体在浏览器中看起来很糟糕。然而，字体从一开始就在 Opera 中顺利呈现。

经过一番搜索，我还设法让它在 Chrome 和 Safari 中顺利呈现。我通过在我的 CSS 中将“svg”移动到 @font-face 的顶部来修复它。

但是，我仍然无法使用 Firefox 和 Internet Explorer。我相信这两个最新版本。

一张图片 (original)： 蓝色的文字是问题。

还有@font-face 代码：

@font-face {
    font-family: 'MuseoSlab500Regular';
    src: url('../fonts/Museo_Slab_500-webfont.eot');
    src: url('../fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format('svg'),
         url('../fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('../fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo_Slab_500-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

到目前为止，我发现并尝试过的唯一解决方案是重新排列 @font-face 中的行。正如我所说，这解决了某些浏览器的问题，但没有解决 Firefox 和 Internet Explorer 的问题。

【问题讨论】：

也许我遗漏了什么，但你的字体样本在 FF 和 IE 中看起来不错。
是抗锯齿吗？我不确定这是否可以在 Firefox/IE 中修复。我也注意到了——Webkit 会将它呈现为抗锯齿，而 FF/IE 会更清晰地呈现它。我相信你可以让 Webkit 看起来像 FF/IE，但不能反过来（使用像 -webkit-font-smoothing）。可以在 ff/ie 中尝试text-shadow: 1px 1px 1px rgba(0,0,0,.004) 让它有点模糊
@Benno text-shadow 老实说并没有真正让它看起来好多了。我也尝试过 font-smooth ，但这似乎根本没有任何区别（可能仅限于 safari）。
只是一个想法，但添加-webkit-backface-visibility:hidden 是否可以解决问题（不管它是什么）？如果是这样，那么它是 webkit 中的一个反锯齿错误。
我会并且一直更关心您将拥有的浏览器、操作系统、显示器等之间的颜色差异（那里有三种不同的蓝色）。我存在的祸根。除非您正在处理大字体，否则甚至不会担心 AA，在这种情况下，它们在某些浏览器中只会看起来很糟糕。不管是什么字体。网络安全与否。

标签： css fonts font-face

【解决方案1】：

我认为文本在浏览器中呈现的略有不同是可以的。在不同的操作系统上，您会收到更多不同的渲染（尝试检查 OS X 或 Ubuntu）。这也没关系。 Photoshop 在这里是一个不好的参考，浏览器提供了最终外观，浏览器将您的网站显示给您的用户。

相反，我认为您应该更正您的语法，因为它不适用于 IE 8-。您正在使用 EOT 字体声明 src 属性 - 这将起作用，但仅适用于 IE 6+。然后你重新声明它，因为你包含了不止一种格式，IE 将无法加载它并备份到默认字体。

您可能感兴趣的其他阅读材料：

【讨论】：

好吧，那太糟糕了。语法已更正，感谢您的回答。

【解决方案2】：

渲染不同的原因有很多，而且大多数情况下您无能为力。尝试使用字体格式只会给主题增加一些变化——不同的系统仍然会以不同的方式呈现字体。

看起来 Firefox 正在应用字距调整（例如，“ä” 比其他浏览器更接近前面的“V”）。但是，至少 fonts.com 提供的 Museo 字体没有紧缩对。但是你没有说明你从哪里得到字体-

【讨论】：

字体来自：Fontspring.com
奇怪的是，当我查看从 Fontspring.com 下载的字体并使用字体属性扩展检查 TTF 文件时，信息是没有字距调整对。然而，Firefox 已经应用了字距调整，如果您使用 CSS 设置 -moz-font-feature-settings: "kern" 0（禁用字距调整，默认情况下在现代版本的 Firefox 中“开启”）进行测试，您可以在 Firefox 上看到一个小的差异。但根据 Font Explorer X 的说法，该字体没有“Vä”字距，但 Firefox 将其字距调整。也许 WOFF 文件的字距与 TTF 文件不同（很奇怪）。