Czcionki internetowe Google wyglądające na chropowate w Chrome - jak zastosować poprawkę

Question

Jest to problem ogólny i wydaje się, że istnieje rozwiązanie. Problem polega na tym, że czcionki internetowe są wyświetlane w chromie. Rozwiązaniem powinno być przeniesienie wywołania .svg przed wywołaniem .woff. Wyjaśnione tutaj: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome i tutaj: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Problem w tym, że używam google czcionek internetowych oraz importowania czcionkę tak:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

i nie wiem, i nie można dowiedzieć się, w jaki sposób zaimportuj go za pomocą znacznika css @font-face zamiast powyższego. Próbowałem, ale utknąłem, ponieważ google oferuje czcionkę tylko w ttf, a nie svg lub woff.

Mam nadzieję, że możesz pomóc.

Answer 1

Musisz samodzielnie hostować czcionki, jeśli chcesz zastosować tę poprawkę.

Łącze Google Fonts to żądanie arkusza stylów, który jest dynamicznie budowany na podstawie podanych przez Ciebie parametrów - oraz w przypadku wykrycia przeglądarki. Dla linku Przykład:

<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 

Jeśli rzeczywiście zrobić wniosek samodzielnie za pomocą curl:

$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic 

to co zostaje odesłana:

@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 400; 
    src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Asap'; 
    font-style: italic; 
    font-weight: 700; 
    src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype'); 
} 

Najprostszą rzeczą do zrobienia jest, aby wróć do Czcionki Google Web, pobierz żądaną czcionkę, przechodząc here i klikając strzałkę pobierania.

Następnie można użyć suggested fix from here, przedstawieniu pliki czcionek pobrane:

@font-face { 
font-family: ‘MyWebFont’; 
src: url(‘webfont.eot’); 
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), 
    url(‘webfont.svg#svgFontName’) format(‘svg’), 
    url(‘webfont.woff’) format(‘woff’), 
    url(‘webfont.ttf’) format(‘truetype’); 
} 

Answer 2

zrobiłeś właściwego reset wszystkich stylów?

Twoje niespójne wrażenie renderowania może być spowodowane domyślnymi ustawieniami przeglądarki.

Reset.css ustawia wszystkie elementy z powrotem na wartości domyślne, zmniejszając tym samym niespójności między przeglądarkami. Istnieje wiele przykładów reset.css, jeden z najbardziej popularnych jest meyerweb reset css. Innym sposobem na zmniejszenie niespójności jest użycie pliku normalize.css.

W skrócie różnica między tymi dwoma podejściami polega na tym, że reset.css po prostu resetuje wszystkie style przeglądarki, podczas gdy normalize.css ma szerszy zakres, tworząc domyślne ustawienia dla wielu przeglądarek.

Różnice między oboma wyjaśnił here autor projektu normalize.css.

Jeśli wszystkie te linki nie pomagają upewnić się, że waga czcionki jest zawsze właściwa, należy zaimportować wszystkie niezbędne grubości czcionki.

Możesz przeczytać o grubościach czcionek tutaj: http://css-tricks.com/watch-your-font-weight/ Powinieneś również zastosować tę technikę, gdy używasz normalize.ccs, ponieważ nie resetuje ona ciężaru czcionki, jak to robi rest.css.

Answer 3

Dodaj to do swojego arkusza stylów dla każdego elementu.

opacity: .99; 

Na przykład -

p, li { 
    opacity: .99; 
} 

nie mam pojęcia, dlaczego to działa, ale tak się stało.