Css @字体质量问题

我用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没有解决。

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

相反，我认为您应该更正语法，因为它不适用于IE8-。您正在使用EOT字体声明

src

属性-这将起作用，但仅适用于IE6+。然后重新定义它，因为包含了多个格式，IE将无法加载它，并将恢复为默认字体

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

---

渲染不同有几个原因，大多数情况下，您无法对它们做太多。尝试使用字体格式只是给主题增加了一些变化——不同的系统仍然呈现不同的字体

---

看起来Firefox正在应用内核（例如，“ä”比其他浏览器更接近前面的“V”）。但是，至少fonts.com上提供的Museo字体没有内核对。但是您没有指定字体的来源-

也许我遗漏了什么，但是您的字体样本在FF和IE中看起来不错。是抗锯齿吗？我不确定这是否是Firefox/IE目前可以解决的问题。我也注意到，Webkit将使其抗锯齿，而FF/IE将使其更清晰。我相信您可以让Webkit看起来像FF/IE，但反过来就不行了（使用like

-Webkit字体平滑

）。可以尝试在ff/ie中使用

text shadow:1px 1px 1px rgba（0,0,0,004）

fuzzy@Benno老实说，文字阴影并没有让它看起来更好。我也尝试过字体平滑，但这似乎没有任何区别（可能只是safari）。只是一个想法，但添加

-webkit backface visibility:hidden

是否解决了问题（它是什么）？如果是这样的话，那就是webkit中的一个反Alizing错误。我会，而且一直会，更关心浏览器、操作系统、显示器等之间的颜色差异（三种不同的蓝色）。我存在的祸根。你甚至不会担心AA，除非你在处理大字体，在这种情况下，它们在某些浏览器中看起来很糟糕。不管字体如何。Web安全与否。我从以下网站获得字体：奇怪的是，当我查看从Fontspring.com下载的字体并使用字体属性扩展来检查TTF文件时，得到的信息是没有紧排对。然而，Firefox已经应用了内核，如果您使用CSS设置

-moz字体功能设置进行测试，您可以在Firefox上看到一个小的差异：“kern”0

（这会禁用内核，在Firefox的现代版本中默认为“开”）。但是根据FontExplorerX的说法，这种字体没有“Vä”的字距，而Firefox却对其进行了字距调整。也许WOFF文件的内核与TTF文件不同（非常奇怪）。好吧，那太糟糕了。语法已经纠正，我很感激你的回答。