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是否有针对此问题的错误。

Answer 2

是的，这是正确的 - 请确保首先定义SVG，否则Chrome将使用它来显示字体，这看起来会呈锯齿状。首先，确保Chrome将使用后面的定义之一来显示字体。

Answer 3

这可能是由于您在Windows上运行的Chrome版本所致。我知道Chrome 10的@ font-face渲染不太顺畅。请截取屏幕截图并与我们分享，然后可能更新您的浏览器，拍摄另一个屏幕截图并进行比较。

祝你好运！

Answer 4

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

镀铬的@ font-face问题

4 个答案: