@chrome字体面临问题

Question

我使用了带有以下语法的Museosans500字体

@font-face {
    font-family: 'MuseoSans500';
    src: url('MuseoSans_500-webfont.eot');
    src: url('MuseoSans_500-webfont.eot?iefix') format('eot'),
        url('MuseoSans_500-webfont.woff') format('woff'),
        url('MuseoSans_500-webfont.ttf') format('truetype'),
        url('MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
    font-weight: normal;
    font-style: normal;
}

它在Firefox中运行良好，但在Chrome中无法正确显示字体。

Answer 1

我不确定你遇到了什么问题，但这个网站http://seanmcb.com/typekit/webkit-antialiasing-test.html提供了一个webkit错误的测试用例，这可能就是您正在经历的。

我在自己的网站上看到了抗锯齿问题，我将尝试伪元素技巧。该网站描述的错误是："在Mac上的Webkit浏览器中，@font face字体使用之前渲染的文本使用的任何抗锯齿设置进行渲染。"

接下来，看看webkit是否有针对这个问题的bug。

Answer 2

是的，这是正确的-确保您首先定义SVG，否则Chrome将使用它来显示字体，这看起来会参差不齐。通过将其放在第一位，您可以确保Chrome将使用稍后的定义之一来显示字体。

Answer 3

这可能是由于您在Windows上运行的Chrome版本。我知道Chrome 10的@font face渲染不太流畅。请截图并与我们分享，然后可能更新您的浏览器，再截图并进行比较。

祝你好运！

Answer 4

在CSS中将SVG格式放在所有其他格式之前。