Synteza czcionek - CSS-Tricks

Anonim

font-systhesisNieruchomość w CSS daje instrukcje dla przeglądarki, jak obsługiwać czcionki pogrubiony i kursywą charakter, gdy określony font-familynie obejmuje ich.

Weźmy jako przykład Lato z Google Fonts. Mówi, że istnieje 10 różnych odmian czcionki.

Każda z tych odmian czcionek jest technicznie innym plikiem czcionki. Jeśli chcemy użyć pewnych gramatur i stylów, połączymy te pliki, aby przeglądarka miała coś do załadowania.

To zdanie wymagałoby zwykle czterech różnych plików czcionek.

Jednak nie wszystkie czcionki zawierają pliki obsługujące wagę i styl. W takich przypadkach przeglądarka sama „zsyntetyzuje” wygląd. Przeglądarka robi wszystko, co w jej mocy, ale fałszywe pogrubienie i styl czasami powodują, że tekst jest mniej czytelny; to znaczy mniej czytelne niż prawdziwie zaprojektowana wersja. W najłagodniejszych przypadkach znaki mogą się nakładać. W poważniejszych przypadkach tekst jest całkowicie nieczytelny lub może nawet zmienić znaczenie - co może się zdarzyć w przypadku języków takich jak chiński, japoński, koreański i innych skryptów logograficznych.

I tu font-synthesispojawia się. Kontroluje, które kroje pisma przeglądarka może syntetyzować.

Składnia

.element ( font-synthesis: none | ( weight || style ); )

Mówiąc prostym językiem, oznacza font-synthesisto akceptację:

  • wartość none
  • albo weightalbostyle
  • zarówno weightistyle

Warto zauważyć, że font-synthesisjest to własność skrócona. Zgodnie ze specyfikacją jest to kombinacja font-synthesis-weighti font-synthesis-styleobie przyjmują wartości autolub none. Ponieważ można uzyskać ten sam efekt, używając skrótu, jest to prawdopodobnie najlepszy sposób.

Wartości

  • none: Nie można syntetyzować ani pogrubionego, ani ukośnego
  • weight: Pogrubienie może być syntetyzowane przez przeglądarkę
  • style: Oblique może być syntetyzowane przez przeglądarkę
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Stosowanie

font-synthesismogą być stosowane do wszystkich, w tym również ::first-letteri ::first-linepseudo-elementów.

Może się zdarzyć, że niedopuszczenie przeglądarki do syntezy pogrubienia i ukośnego tekstu w całym języku ma sens, ponieważ każdy z nich może zasłaniać znaki. Oto przykład pobrany ze specyfikacji, która wyłącza syntetyzowane pogrubione i ukośne kroje czcionek zawierające znaki arabskie:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Próbny

Wsparcie przeglądarki

W chwili pisania tego tekstu caniuse podaje 20,21% globalnego pokrycia font-synthesisnieruchomości.

Pulpit

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Nie Nie 34+ Nie 9+ Nie

mobilny

iOS Safari Opera Mini Przeglądarka Android Chrome na Androida Firefox dla Androida
9+ Wszystko Nie Nie 68

Chcesz korzystać font-synthesisz poczty e-mail? Campaign Monitor informuje, że jest obsługiwany przez następujących klientów:

  • Apple Mail 10+
  • Outlook dla komputerów Mac
  • Aplikacja AOL Alto iOS
  • iOS Mail 10+
  • Wróbel
  • G Suite
  • Gmail
  • Skrzynka odbiorcza Google

Więcej informacji

  • Specyfikacja modułu czcionek CSS poziomu 4
  • „Test CSS3: font-synthesis” autorstwa Erica Meyera
  • „Jak zastosować kursywę” autorstwa Chrisa Coyiera