Używam czcionek internetowych Google i są one dobre przy bardzo dużych rozmiarach czcionek, ale przy 18 pikselach wyglądają okropnie. Czytałem tu i ówdzie, że istnieją rozwiązania do wygładzania czcionek, ale nie znalazłem żadnego miejsca, które wyjaśniałoby to jasno, a kilka fragmentów, które znalazłem, w ogóle nie działa.
Kim h4
wygląda okropnie w prawie każdej przeglądarki, ale Chrome jest najgorsze. W przeglądarce Chrome prawie wszystkie moje czcionki wyglądają okropnie.
Czy ktoś może wskazać mi właściwy kierunek? Być może znasz źródło, które jasno to wyjaśnia? Dzięki!
PRZYKŁADOWY ZRZUT EKRANU # 1
Ten zrzut ekranu pokazuje stronę główną https://www.dartlang.org/ , języka programowania stworzonego przez Google (więc możemy zasugerować, że ta strona jest również stworzona przez Google) i używa Google Webfonts.
Zrzut ekranu pokazuje Google Chrome po lewej stronie, Firefox / Internet Explorer po prawej .:
PRZYKŁADOWY ZRZUT EKRANU # 2
Ten zrzut ekranu przedstawia stronę z informacjami o produkcie w witrynie Adobe.com przy użyciu czcionek internetowych dostarczonych przez firmę Typekit. Adobe i Typekit to profesjonaliści, jeśli chodzi o czcionki.
Zrzut ekranu pokazuje Google Chrome po prawej stronie, Firefox / Internet Explorer po lewej:
źródło
Odpowiedzi:
Stan problemu, czerwiec 2014 r .: poprawiony w Chrome 37
Wreszcie zespół Chrome opublikuje poprawkę dotyczącą tego problemu w Chrome 37, która zostanie upubliczniona w lipcu 2014 r. Zobacz przykładowe porównanie aktualnej stabilnej przeglądarki Chrome 35 i najnowszej wersji Chrome 37 (wczesna wersja rozwojowa) tutaj:
Stan emisji, grudzień 2013
1.) Jest NO właściwe rozwiązanie, gdy ładowanie czcionek przez
@import
,<link href=
lub Googlewebfont.js
. Problem polega na tym, że Chrome po prostu żąda plików .woff z interfejsu API Google, które renderują się okropnie. Zaskakujące jest, że wszystkie inne typy plików czcionek renderują się pięknie. Jest jednak kilka sztuczek CSS, które nieco „wygładzą” renderowaną czcionkę. Sposób obejścia znajdziesz głębiej w tej odpowiedzi.2.) Istnieje prawdziwe rozwiązanie tego problemu w przypadku samodzielnego hostowania czcionek, które po raz pierwszy opublikował Jaime Fernandez w innej odpowiedzi na tej stronie Stackoverflow, które rozwiązuje ten problem, ładując czcionki internetowe w specjalnej kolejności. Czułbym się źle, kopiując po prostu jego doskonałą odpowiedź, więc proszę, zajrzyj tam. Istnieje również (niesprawdzone) rozwiązanie, które zaleca używanie tylko czcionek TTF / OTF, ponieważ są one teraz obsługiwane przez prawie wszystkie przeglądarki.
3.) Zespół programistów Google Chrome pracuje nad tym problemem. Ponieważ nastąpiło kilka ogromnych zmian w silniku renderującym, oczywiście coś się dzieje.
Napisałem duży post na blogu w tej sprawie. Zapraszam do obejrzenia: Jak naprawić brzydkie renderowanie czcionek w Google Chrome
Odtwarzalne przykłady
Zobacz, jak przykład z pierwszego pytania wygląda dzisiaj w przeglądarce Chrome 29:
PRZYKŁAD POZYTYWNY:
Po lewej: Firefox 23, po prawej: Chrome 29
PRZYKŁAD POZYTYWNY:
U góry: Firefox 23, u dołu: Chrome 29
PRZYKŁAD NEGATYWNY: Chrome 30
PRZYKŁAD NEGATYWNY: Chrome 29
Rozwiązanie
Naprawianie powyższego zrzutu ekranu za pomocą -webkit-text-stroke:
Pierwszy wiersz jest domyślny, drugi to:
Trzeci rząd zawiera:
Tak więc sposobem na naprawienie tych czcionek jest po prostu ich podanie
lub składnia RGBa (autorstwa nezroy, znaleziona w komentarzach! Dzięki!)
Istnieje również przestarzała możliwość : nadaj tekstowi prosty (fałszywy) cień:
Rozwiązanie RGBa (znalezione na blogu Jaspera Espejo):
Napisałem na blogu post na ten temat:
Jeśli chcesz być na bieżąco z tą kwestią, zajrzyj do odpowiedniego posta na blogu: Jak naprawić brzydkie renderowanie czcionek w Google Chrome . Opublikuję wiadomości, jeśli pojawią się wiadomości na ten temat.
Moja pierwotna odpowiedź:
To duży błąd w Google Chrome i zespół Google Chrome o tym wie, zobacz oficjalny raport o błędzie tutaj . Obecnie w maju 2013 roku, nawet 11 miesięcy po zgłoszeniu błędu, nie został on rozwiązany. To dziwne, że jedyną przeglądarką, która psuje Google Webfonts, jest przeglądarka Google Chrome (!). Istnieje jednak proste obejście, które rozwiąże problem. Rozwiązanie znajdziesz poniżej.
OŚWIADCZENIE ZESPOŁU PROGRAMISTYCZNEGO GOOGLE CHROME, MAJ 2013 R.
Oficjalne oświadczenie w komentarzach do zgłoszenia błędu:
Obecnie trwają prace nad renderowaniem czcionek w systemie Windows. ... Mamy nadzieję, że w ciągu jednego lub dwóch kamieni milowych programiści będą mogli zacząć grać. To, jak szybko osiąga stan stabilny, jak zawsze, zależy od tego, jak szybko możemy wykorzenić i wypalić wszelkie regresje.
źródło
-webkit-font-smoothing
właściwości. Zobacz moją odpowiedź poniżej.text-shadow: #333 0px 0px 1px;
. Wielkie dzięki za wskazówkę.Miałem ten sam problem i znalazłem rozwiązanie w tym poście Sama Goddarda ,
Rozwiązaniem jest dwukrotne zdefiniowanie wywołania czcionki . Najpierw tak, jak jest to zalecane, do wszystkich przeglądarek, a po konkretnym wywołaniu tylko dla Chrome ze specjalnym zapytaniem o media:
Dzięki tej metodzie czcionka będzie dobrze renderować się we wszystkich przeglądarkach. Jedynym minusem, jaki znalazłem, jest to, że plik czcionki jest również pobierany dwukrotnie.
Znajdziesz hiszpańską wersję tego artykułu na mojej stronie
źródło
Chrome nie renderuje czcionek tak, jak robi to Firefox lub żadna inna przeglądarka. Zwykle jest to problem w Chrome działającym tylko w systemie Windows. Jeśli chcesz, aby czcionki były gładkie, użyj
-webkit-font-smoothing
właściwości na swoichh4
tagach w ten sposób.Możesz również użyć
subpixel-antialiased
, to da ci inny rodzaj wygładzenia (sprawiając, że tekst będzie trochę rozmyty / zacieniony). Jednak będziesz potrzebować wersji nocnej, aby zobaczyć efekty. Możesz dowiedzieć się więcej o wygładzaniu czcionek tutaj .źródło
body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Ok, możesz tego po prostu użyć
Upewnij się, że kolor tekstu i szerokość górnego obrysu tekstu muszą być takie same i to wszystko.
źródło
Przedtem powiem, że to nie zawsze zadziała , przetestowałem to z
sans-serif
czcionkami i czcionkami zewnętrznymi, takimi jakopen sans
Czasami, gdy używasz dużych czcionek, spróbuj zbliżyć się do
font-size:49px
i wyższąTo jest tekst nagłówka o rozmiarze 48px (
font-size:48px;
w elemencie zawierającym tekst).Ale jeśli przekroczysz 48 do
font-size:49px;
(i 50, 60, 80 pikseli itd.), Dzieje się coś interesującegoTekst automatycznie staje się gładki i wydaje się naprawdę dobry
Po drugiej stronie ...
Jeśli szukasz małych czcionek, możesz spróbować, ale nie jest to zbyt skuteczne.
Do rodzica tekstu zastosuj następną właściwość css:
-webkit-backface-visibility: hidden;
Możesz przekształcić coś takiego:
Do tego:
(czcionka to
Kreon
)Weź pod uwagę, że gdy nie stawiasz tej własności,
-webkit-backface-visibility: visible;
jest dziedziczonaAle uważaj , ta praktyka nie zawsze da dobre rezultaty, jeśli przyjrzysz się uważnie, Chrome po prostu sprawia, że tekst wygląda trochę rozmyty.
Kolejny interesujący fakt:
-webkit-backface-visibility: hidden;
zadziała również, gdy przekształcisz tekst w Chrome (z-webkit-transform
właściwością, która obejmuje obroty, pochylenia itp.)Bez
-webkit-backface-visibility: hidden;
Z
-webkit-backface-visibility: hidden;
Cóż, nie wiem, dlaczego to działa, ale dla mnie działa. Przepraszam za mój dziwny angielski.
źródło