Chrome nie renderuje @ czcionka-twarz ttf/woff gładka

Question

Używam font ikony IconMoon @ font-face dla projektu, nad którym pracuję.

Czcionka jest ładnie i płynnie renderowana, gdy zawiera tylko czcionkę .svg i/lub .eot lub podczas przeglądania w innych przeglądarkach, takich jak IE9. Ale podczas przeglądania witryny za pomocą przeglądarki Chrome, w tym formatu .ttf i/lub .woff, ikony stają się bardzo niestabilne i nie powodują wcale wygładzania. Czy istnieje sposób na poinformowanie Chrome, aby wczytała plik .eot lub .svg zamiast .ttf lub .woff?

Answer 1

może ta właściwość css rozwiązuje problemu:

yourSelector { 
    font-smooth: always; 
    -webkit-font-smoothing: antialiased; 
} 

Answer 2

znalazłem to działa na tej kwestii. Nie wydaje mi się, żeby rozwiązanie gładkie w fonterze rzeczywiście działało.

@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 400; 
    src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */ 
    src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
     url('fonts/montserrat-regular-webfont.ttf') format('truetype'), 
     url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'), 
     url('fonts/montserrat-regular-webfont.woff') format('woff'); 
} 

Firefox odbierze ostatni na liście (WOFF), pracuje czy nie, IE użyje EOT i Chrome odbierze pierwszy z nich, który działa (SVG). WOFF działa też w chromie, ale powoduje aliasami glify, więc oddanie SVG przed WOFF rozwiązuje ten problem. *

To rozwiązanie działa, ale powoduje dodatkowy wniosek w Safari, można zostawić SVG poniżej WOFF jak ty oryginalnie i dodać:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
    font-family: 'OpenSansLightItalic'; 
    src: url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); 
    } 
} 

przeczytać o tym tutaj: http://hollisterdesign.wordpress.com/2014/04/29/note-to-self-always-use-this-fix/

Answer 3

Spróbuj ten mały obrót dla czcionki, mam nadzieję, że to pomoże.

Przykład:

p{ 
    transform: rotate(-0.0000000001deg); 
} 

Answer 4

Put url czcionki SVG przed wszystkimi innymi, Chrome załaduje SVG, a dostaniesz piękny renderowanie, szczególnie dla lekkich czcionki.