Czy w Google Chrome jest jakieś „wygładzanie czcionek”?

141

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 h4wyglą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 .:

google chrome po lewej, 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:

google chrome po lewej, firefox / internet Explorer po prawej

imakeitpretty
źródło
dla mnie wyglądają dobrze w chrome i firefox ... czy mógłbyś dodać printscreen?
JFK,
Również na iPhonie / iOS wyglądają bardzo dobrze.
insertusernamehere
Czy używasz systemu Windows? Jeśli tak, przyczyną może być silnik wygładzający ClearType systemu operacyjnego. Wypróbowałem tę stronę w systemach Mac OS, Ubuntu, Fedora i Chrome OS oprócz Windows; ten ostatni jako jedyny nie renderuje się poprawnie, bo podejrzewam, że to silnik ClearType.
Jules,
tak, to okna. Czy wiesz, co mogę z tym zrobić?
imakeitpretty
właśnie odkryłem tę przydatną funkcję: chrome: // flags / # lcd-text-aa - włącz ją i wygładza tekst
cinek

Odpowiedzi:

162

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:

wprowadź opis obrazu tutaj

Stan emisji, grudzień 2013

1.) Jest NO właściwe rozwiązanie, gdy ładowanie czcionek przez @import, <link href=lub Google webfont.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

wprowadź opis obrazu tutaj

PRZYKŁAD POZYTYWNY:

U góry: Firefox 23, u dołu: Chrome 29

wprowadź opis obrazu tutaj

PRZYKŁAD NEGATYWNY: Chrome 30

wprowadź opis obrazu tutaj

PRZYKŁAD NEGATYWNY: Chrome 29

wprowadź opis obrazu tutaj

Rozwiązanie

Naprawianie powyższego zrzutu ekranu za pomocą -webkit-text-stroke:

wprowadź opis obrazu tutaj

Pierwszy wiersz jest domyślny, drugi to:

-webkit-text-stroke: 0.3px;

Trzeci rząd zawiera:

-webkit-text-stroke: 0.6px;

Tak więc sposobem na naprawienie tych czcionek jest po prostu ich podanie

-webkit-text-stroke: 0.Xpx;

lub składnia RGBa (autorstwa nezroy, znaleziona w komentarzach! Dzięki!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Istnieje również przestarzała możliwość : nadaj tekstowi prosty (fałszywy) cień:

text-shadow: #fff 0px 1px 1px;

Rozwiązanie RGBa (znalezione na blogu Jaspera Espejo):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

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.

Sliq
źródło
1
Problem nie występuje we wszystkich przeglądarkach działających w systemie Windows, tylko w przypadku Chrome. Firefox, Opera i IE mają odpowiednie wygładzanie czcionek. Chociaż można to naprawić w chrome za pomocą -webkit-font-smoothingwłaściwości. Zobacz moją odpowiedź poniżej.
Kushagra,
1
Do czarnego tekstu użyłem text-shadow: #333 0px 0px 1px;. Wielkie dzięki za wskazówkę.
Yoone
6
Może zgubił się w tłumaczeniu, ale -webkit-text-stroke działa tylko wtedy, gdy używasz alfy koloru czcionki. Więc dla czarnej czcionki używam czegoś takiego jak „-webkit-text-stroke: 1px rgba (0,0,0,0.1)”.
nezroy
Zauważyłem, że Chrome 30 na Macu wykazuje teraz ten sam brak antyaliasingu.
jwadsack,
1
W oficjalnym zgłoszeniu na chrome board do tego wydania code.google.com/p/chromium/issues/detail?id=137692 wygląda na to, że ma na celu poprawkę do v37, jeśli dobrze rozszyfrowałem ostatni post w wątku .
Gruber
46

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:

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

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

wprowadź opis obrazu tutaj

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

Jaime Fernandez
źródło
6
To jest właściwie prawidłowa odpowiedź, jednak można ją uprościć. Umieszczenie wersji SVG NA PIERWSZYM miejscu na liście czcionek rozwiązuje również problem!
jduncanator
2
Ta odpowiedź daje - jak dotąd - najlepsze wyniki. Czcionka SVG wygląda x100 lepiej niż hack -webkit-text-stroke. Główną wadą jest rozmiar czcionki w wersji SVG; zwykle jest znacznie większy :-( Google naprawdę musi to załatwić jak najszybciej
Nieśmiały
W pełni się zgadzam ! Link do tej odpowiedzi znajdę się w mojej odpowiedzi.
Sliq
@jduncanator Umieszczanie SVG w pierwszej kolejności nie jest zalecane - oznacza to, że czcionka SVG zostanie załadowana przez każdą przeglądarkę, która ją obsługuje, podczas gdy potrzebujesz jej tylko dla Chrome w systemie Windows.
RoelN
@jduncanator Dwoma głównymi winowajcami są brak obsługi podpowiedzi i duży rozmiar plików (kompresja gzip dla czcionek nie jest domyślnie włączona na wielu serwerach).
RoelN,
22

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-smoothingwłaściwości na swoich h4tagach w ten sposób.

h4 {
    -webkit-font-smoothing: antialiased;
}

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 .

Kushagra
źródło
11
Mam najnowszą wersję Chrome dzisiaj 8-feb-2013 i ta strona tutaj nie pokazuje żadnej różnicy między nimi maxvoltar.com/sandbox/fontsmoothing
thednp
4
To nie działa (testowane w systemie Windows). Ponieważ Mac i tak to robią, oznaczyłem, aby zniechęcić ludzi do korzystania z niego.
KryptoniteDove,
4
To nie działa. Właśnie wypróbowałem to w systemie Windows 8. Z każdą najnowszą wersją Chrome (stan na 10/8/2013).
jay_t55
3
Na Mac Chrome i Safari to DZIAŁA, więc warto to dodać. Apple.com używa go nawet w swoim arkuszu stylów base.css:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Justin,
1
odpowiednikiem Firefoksa jest -moz-osx-font-smoothing: skala szarości;
Jeff Walters
14

Ok, możesz tego po prostu użyć

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Upewnij się, że kolor tekstu i szerokość górnego obrysu tekstu muszą być takie same i to wszystko.

Rishabh Gupta
źródło
wygładzanie czcionek już nic nie robi, ale obrys tekstu działa i może pomóc w przypadku niektórych czcionek. Wydawało się, że najlepsze wyniki osiągam z uderzeniem 0,5 piksela i rgba (0,0,0,0,5).
Moss
odpowiednikiem Firefoksa jest -moz-osx-font-smoothing: skala szarości;
Jeff Walters
to fajne ... po prostu zastąp # 34343b dziedziczeniem ..;)
Sagive SEO
9

Przedtem powiem, że to nie zawsze zadziała , przetestowałem to z sans-serifczcionkami i czcionkami zewnętrznymi, takimi jakopen sans

Czasami, gdy używasz dużych czcionek, spróbuj zbliżyć się do font-size:49pxi wyższą

rozmiar czcionki: 48px

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ącego

rozmiar czcionki: 49px

Tekst 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:

-webkit-backface-visibility: widoczne;

Do tego:

-webkit-backface-visibility: ukryty;

(czcionka to Kreon)

Weź pod uwagę, że gdy nie stawiasz tej własności, -webkit-backface-visibility: visible;jest dziedziczona

Ale 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-transformwłaściwością, która obejmuje obroty, pochylenia itp.)

Bez

Bez -webkit-backface-visibility: hidden;

Z

Z -webkit-backface-visibility: hidden;

Cóż, nie wiem, dlaczego to działa, ale dla mnie działa. Przepraszam za mój dziwny angielski.

Yavierre
źródło