Хром Font Сглаживание SVG трюк не работает

Question

Я пытаюсь сгладить шрифты в Chrome на Windows, заставляя Chrome использовать SVG-файлы, как описано в этой статье здесь: http://const.fr/chrome-webfonts-antialiasing-fixed.

Для моего теста я использовал CrusoeTextBold с сайта библиотеки OpenFonts здесь: http://openfontlibrary.org/en/font/crusoe-text. Мой код css вставлен ниже.

Если я смотрю на образец текста на веб-сайте OpenFonts lib (который не является изображением), он выглядит действительно действительно хорошим в Chrome, хотя они, похоже, используют версию 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

Хорошо, похоже, я решил проблему. Во втором заявлении ЦСИ: 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'); 
    } 
}