Question

我在Photoshop中设计了一个网站，对结果感到满意，所以我开始编码。但是我在使用字体渲染方面遇到了一些麻烦。与Photoshop相比，浏览器中的字体看起来很糟糕。然而，从一开始就在Opera中平滑地渲染了字体。

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

但是我仍然遇到Firefox和Internet Explorer的问题。我相信这两个最新版本。

图片（original）： enter image description here 蓝色的文字是问题所在。

和@ 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的问题。

Answer 1

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

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

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

Answer 2

渲染效果不同有几个原因，而且大多数情况下你无法做很多事情。尝试使用字体格式只会增加主题的一些变化 - 不同的系统仍然以不同的方式呈现字体。

看起来Firefox正在应用字距调整（例如，“ä”更接近前面的“V”而不是其他浏览器）。但是，至少fonts.com提供的Museo字体没有kern对。但是您没有指定从哪里获得字体 -

@ font-face质量问题

2 个答案: