2

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

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

但是，我仍然在使用 Firefox 和 Internet Explorer 时遇到问题。我相信这两个最新版本。

一张图片（原图）： 在此处输入图像描述 蓝色的文字是问题所在。

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

4

2 回答 2

1

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

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

您可能感兴趣的补充阅读：

于 2012-09-30T16:45:08.330 回答
0

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

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

于 2012-09-30T17:06:55.560 回答