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

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:

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

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:

-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.

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');
  }
}

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

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 .

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.

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ą

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

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:

Do tego:

(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 -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.