Chrome字体Antialiasing SVG技巧不起作用

Question

我试图通过强制Chrome使用SVG文件来平滑Chrome中的字体，如本文所述： http://const.fr/chrome-webfonts-antialiasing-fixed

对于我的测试，我在OpenFonts库网站上使用了CrusoeTextBold： http://openfontlibrary.org/en/font/crusoe-text。 我的CSS代码粘贴在下面。

如果我查看OpenFonts lib网站上的示例文本（这不是图像），虽然它们似乎使用的是ttf版本，但它在Chrome中看起来确实非常好。在我的网站上，我使用的是SVG版本，它看起来很棒！ （见下图）。我只是不明白为什么我的样本看起来比他们的样子更加前卫......

任何帮助非常感谢。 （我一直试图解决这个问题。）

谢谢！

@font-face {
    font-family: 'CrusoeTextBold';
    src: url('../fonts/CrusoeText-Bold.eot');
    src: url('../fonts/CrusoeText-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/CrusoeText-Bold.woff') format('woff'),
         url('../fonts/CrusoeText-Bold.ttf') format('truetype'),
         url('../fonts/CrusoeText-Bold.svg#crusoetext-regular') format('svg');
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CrusoeTextBold';
        src: url('../fonts/CrusoeText-Bold.svg') format('svg');
    }
}

Answer 1

好吧，好像我解决了这个问题。 在第二个语句中，src：url还需要字体名称，在本例中为“#CrusoeTextBold”，因此完整语句如下所示：

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: 'CrusoeTextBold';
        src: url('../fonts/CrusoeText-Bold.svg#CrusoeTextBold') format('svg');
    }
}