Google Czcionki Webfonts i Anti-aliasing

Question

Lubię używać Google Czcionki Webfonts na moich handlowym w pracach, ale sprawiają one nieco zbyt postrzępione, chociaż w podglądzie dostarczonych przez Google, sprawiają one bardzo gładka.

to sprawdzić: http://www.google.com/fonts/specimen/Oxygen

Największym podgląd Wygląda bardzo ładnie i gładko, ale kiedy zaimportować go na mojej stronie i używać go, wydaje się zniekształcony na krawędziach, bardzo postrzępione. Czy Google używa dodatkowej biblioteki do osiągnięcia tego wygładzania lub czy robię coś nie tak?

Answer 1

Jeśli odinstalować czcionki z systemu (folderu Windows/Fonts), powinieneś być w stanie go zobaczyć gładkie. Aby rozwiązać ten problem. Nie używaj @import ani bezpośredniego linku z google. Raczej pobrać pakiet z www.fontsquirrel.com (cały zestaw czcionek WWW) i użyj @ font-face w css, aby uzyskać gładkie czcionki.

Answer 2

Czcionki renderować różnie w oparciu o:

• Rozdzielczość ekranu/monitora
• Przeglądarka
• System operacyjny
• Rozmiar obsługi i podpowiedzi

Opierając się na fakcie, że czcionki wyglądają gorzej w Chrome i Firefoksie, jedyną rzeczą, którą możesz zrobić, aby wypróbować te przeglądarki, aby uczynić je lepszymi. Nie widząc swój kod tylko rzeczy mogę polecić to:

• Upewniwszy używasz godnej css resetowania (coś takiego: http://meyerweb.com/eric/tools/css/reset/).

• Spróbuj dodać font-weight: normal; do czcionek, aby sprawdzić, czy to robi różnicę; czasami przeglądarki i frameworki próbują dodawać fałszywe pogrubienia do rzeczy.

• Zapewnienie, że używasz rzeczywistych wersji czcionek, a nie tylko stylów CSS.

• Jeśli wszystko inne zawiedzie, spróbuj zmniejszyć rozmiar czcionki w górę/w dół o niewielką wartość i sprawdź, czy czcionka podpowiada lepiej w tych rozmiarach.

Mam nadzieję, że to pomoże!

Answer 3

nie jestem świadomy o pełnych szczegółów technicznych, ale renderowanie czcionek Chrome może odmiennie niż w innych przeglądarkach.

Co można spróbować jest określenie font-smoothing regułę w pliku CSS.

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

Ta reguła jest często używana.Czasami ludzie stosuje ją do wszystkich selektorów (z *):

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

trzech możliwych wartości dla tej właściwości są:

-webkit-font-smoothing: none; 
-webkit-font-smoothing: subpixel-antialiased; 
-webkit-font-smoothing: antialiased; 

Niestety, nie mogę odtworzyć problem wygładzania teraz (I nie wiem dlaczego, mój komputer nie zmienia wygładzania i wszystko jest doskonale czytelne, może ostatnia poprawka Chrome, ale nie mogę nic na ten temat znaleźć).

Dalsza lektura na:

• o ClearType & Chrome: na Google forums
• -webkit-font-smoothing demo na Codepen.

Mam nadzieję, że mogę pomóc. :)