css - chrome 的@font-face 问题

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。