1

我使用了具有以下语法的 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 中无法正确显示字体。

4

4 回答 4

1

我不确定您遇到了什么问题，但是这个网站http://seanmcb.com/typekit/webkit-antialiasing-test.html提供了一个很好的 webkit 错误测试用例，这可能是您的问题重新体验。

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

接下来，最好看看 webkit 是否有针对此问题的 bug。

于 2011-07-12T20:11:45.510 回答
1

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

于 2012-12-18T18:22:30.473 回答
0

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

祝你好运！

于 2011-07-06T13:57:05.800 回答
0

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

于 2012-07-12T21:12:38.693 回答