Chrome字体抗锯齿SVG技巧不起作用

Question

我试图通过强制Chrome使用本文中描述的SVG文件在Windows上的字体在Chrome上： http://const.fr/chrome-webfonts-antialiasing-fixed。

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

如果我看一下OpenFonts lib网站上的示例文本（它不是图像），但它看起来确实非常棒，尽管它们似乎使用的是ttf版本。在我的网站上，我使用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'); 
    } 
}