@ svg-czcionka-twarz nie działa poprawnie w Chrome?

Question

Mam problem z określoną czcionką i sposobem renderowania w Chrome.

Firefox poprawnie wyświetla czcionkę z powodu użycia ttf.

Chrome nie używa znaków antyaliasowych, a czcionka jest zbyt "ostra" i brzydka.

Jest to deklaracja css użyłem

@font-face { 
    font-family: 'HelveticaNeueLT Std Thin'; 
    src: url(../fonts/h2.eot); 
    src: url(../fonts/h2.svg#test) format('svg'), 
     url(../fonts/h2.woff) format('woff'), 
     url(../fonts/h2.ttf) format('truetype'); 
font-weight: normal; 
font-style: normal; 
} 

doszedłem do wniosku, że problem jest z plikiem deklaracja SVG/czcionki. Jeśli w ogóle nie używam znacznika haszowania i zostawiam go jako jedyny .svg, renderuje on antyaliasję, ale na innej wysokości linii z nieznacznym przesunięciem. Jeśli dodaję .svg # cokolwiek, to wcale nie antialias i wygląda brzydko.

Wszelkie sugestie mogą pomóc mi rozwiązać ten dość irytujący problem.

PS: Wygładzanie systemu Windows jest OK, testowałem to. Wypróbowałem również deklarację @media screen and (-webkit-min-device-pixel-ratio:0) tylko dla czcionki svg, bez powodzenia. Rozumiem, że może to być repost, ale po wypróbowaniu wszystkich rozwiązań z powiązanych pytań, jestem trochę zdesperowany.

Answer 1

Aby uzyskać Czcionki Webfonts aby uczynić z dobrymi Wygładzanie w Chrome na Windows, trzeba użyć tego formatu w deklaracji czcionki:

@font-face { 
    font-family: 'Futura'; 
    src: url('futura.eot'); 
    src: url('futura.eot?#iefix') format('embedded-opentype'), 
     url('futura.woff') format('woff'), 
     url('futura.ttf') format('truetype'), 
     url('futura.svg#futura') format('svg'); 

    font-weight: normal; 
    font-style: normal; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    @font-face { 
     font-family: 'Futura'; 
     src: url('futura.svg#futura') format('svg'); 
    } 
} 

Zasadniczo trzeba wymusić Chrome użyć formatu czcionek SVG. Możesz to zrobić, przenosząc adres URL dla wersji .svg na górę, jednak Chrome w systemie Windows miał problem z zmyśleniem układu podczas wykonywania tej czynności (do 30 włącznie). Zastępując deklarację czcionki za pomocą zapytania o media, problemy te są rozwiązywane.

Ponadto: czasami pozycja podstawowa nie pasuje do czcionek OpenType i SVG, ale można to zmienić, edytując pliki czcionek SVG. czcionek SVG jest oparty na XML i jeśli spojrzeć na zgłoszenia

<font-face units-per-em="2048" ascent="1900" descent="-510" /> 

Można zmienić wartości dla wznoszenia i zmusić go, aby dopasować inne wersje formatu czcionki.

Answer 2

Font Squirrel's webfont generator organizuje ich @font-face CSS tak:

@font-face { 
    font-family: 'HelveticaNeueLT Std Thin'; 
    src: url('../fonts/h2.eot'); 
    src: url('../fonts/h2.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/h2.woff') format('woff'), 
     url('../fonts/h2.ttf') format('truetype'), 
     url('../fonts/h2.svg#h2') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Więcej informacji o tym, dlaczego kolejność ma znaczenie: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Jeśli nadal daje problemy, spróbuj przy użyciu wyżej wspomnianego generatora, wybierz Opcja EXPERT i baw się z różnymi ustawieniami (szczególnie w Renderowanie i X-wysokość).

Answer 3

Przy odwoływaniu do plików SVG w @ powierzchni-czcionki id (#) w ścieżce pliku określa element wewnątrz pliku .svg. Aby znaleźć poprawny identyfikator, możesz otworzyć go w edytorze i sprawdzić znacznik <font>.

Na przykład:

@font-face { 
    font-family: 'latobold'; 
    src: url('../fonts/lato/lato-bold-webfont.eot'); 
    src: url('../fonts/lato/lato-bold-webfont.svg#latobold') format('svg'), 
     url('../fonts/lato/lato-bold-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/lato/lato-bold-webfont.woff') format('woff'), 
     url('../fonts/lato/lato-bold-webfont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

dotyczy:

<font id="latobold" horiz-adv-x="1187" >

Answer 4

spróbować tego @ realizację font-face

@font-face { 
    font-family: 'OpenSans'; 
    src: url('fonts/OpenSans-Regular-webfont.eot'); 
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/OpenSans-Regular-webfont.woff') format('woff'), 
     url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'), 
     url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

h1 { 
    font-family: 'OpenSans'; 
    font-weight: 300%; 
} 

uzyskać więcej informacji, zobacz ten przykład https://github.com/ttibensky/BulletProof-font-face-implementation

Answer 5

Jak sugeruje Lily i wiewiórka czcionek, czcionka SVG powinna prawie zawsze znajdować się na dole listy @font-face źródeł. Nie chcesz, aby przeglądarka używała czcionek SVG, chyba że nie może używać niczego innego.

Powodem tego jest fakt, że czcionki SVG są bardzo słabo obsługiwane pod numerem , a wsparcie maleje. Jak z tego postu (2015), czcionek SVG są no longer supported by Chrome (38) i są obsługiwane tylko przez Safari 8, iOS Safari 8.1 i Android przeglądarka 37. http://caniuse.com/#feat=svg-fonts

Edit: Począwszy od lutego 2016, Android Browser 47 nie obsługuje SVG czcionki. Safari i iOS Safari nadal je obsługuje i wydają się być jedynymi przeglądarkami, które to robią.