Jak korzystać z czcionek internetowych

Feb 4, 2026

Jak

Poniżej znajduje się fragment zabrany z podręcznika Webfont Bram Stein. Kupuj tutaj .

Czcionki internetowe. są zdefiniowane w CSS przez @ font-face reguła. Jeśli jesteś programistą internetową, najprawdopodobniej napisałeś, skopiowany i wklejony, lub przy najmniejszym wypadku @ font-face reguła.

Dla kompletności szybko przebiegmy przez podstawowy przykład:

 @ font-face {
  Czcionka: Elena;
  SRC: URL (Elena-Regular.Woff);
}

Tworzy to nową rodzinę czcionki internetowej, do której można odwoływać rodzina czcionek lub czcionka shorthand właściwość. Ale coś tutaj brakuje. Odnosząc się do czcionki internetowej w stosie czcionki, zawsze upewnij się, że włączenie co najmniej jednej czcionki awaryjnej w przypadku, gdy czcionka internetowa nie powiedzie się.

Tutaj, jeśli Elena nie załaduje, przeglądarka spadnie na ogólny serif. rodzina czcionek:

 p {
  Font-Family: Elena, Serif;
}

Istnieje jeszcze więcej czcionek, ale na razie zachowajmy nasze stos czcionki proste, w tym tylko ogólne serif. i sans-serif. Rodziny czcionek.

Rodziny czcionek

Tworzenie rodziny czcionek z wieloma stylami jest osiągnięty przez tworzenie @ font-face reguła dla każdego stylu i używania tego samego rodzina czcionek Nazwa. Następujące @ font-face Zasady tworzą rodzinę z normalnym i odważnym stylem:

 @ font-face {
     Czcionka: Elena;
     SRC: URL (Elena-Regular.Woff);
     Czcionka: Normalna;
}
   @ font-face {
     Czcionka: Elena;
     SRC: URL (Elena-Bold.Woff);
     czcionka: pogrubienie;
}

Możesz użyć tej rodziny czcionek w swoich CSS, odwołując się do nazwiska i wagi w selektorach. Dotyczy to regularnego stylu do akapitów i odważnego stylu silny Ustępy:

 p {
  Font-Family: Elena, Serif;
}

p silny {
  czcionka: pogrubienie;
}

Oprócz grubość czcionki , @ font-face akceptuje również styl czcionki i font-stretch. Deskryptory nieruchomości, które definiują style, takie jak kursywa i skondensowane. Wszystkie trzy deskryptory nieruchomości mogą być używane do tworzenia jednej rodziny czcionek z wieloma stylami. Teoretycznie to pozwala stworzyć rodzinę zawierającą 243 indywidualne style (dziewięć grubość czcionki wartości × trzy styl czcionki wartości × dziewięć. font-stretch. wartości).

W praktyce jednak jesteś ograniczony do 27 wartości, ponieważ niektóre przeglądarki nie obsługują font-stretch. . Spójrz na poniższą tabelę, aby zobaczyć, które przeglądarki możesz użyć i wyglądać tutaj Aby uzyskać bardziej szczegółowe informacje.

Click the icon in the top right to enlarge the image — Kliknij ikonę w prawym górnym rogu, aby powiększyć obraz

Z Szczęściem pozostałe przeglądarki będą wdrażać font-stretch. Wkrótce i będziesz mógł korzystać ze wszystkich 243 klasyfikacji czcionek.

Formaty czcionek

The. src. Deskryptor informuje przeglądarkę, gdzie otrzymać plik czcionki. Poprzednie przykłady użyto formatu pojedynczego czcionki, ale często widzisz adresy URL do wielu formatów czcionek w połączeniu z podpowiedziami formatu, które są dołączone po URL za pomocą adresu URL przy użyciu adresu URL format ("wartość") składnia.

Formatuj wskazówki Powiedz przeglądarkę, jaki jest format pliku czcionki w danym adresie URL.

 @ font-face {
  Czcionka: Elena;
  SRC: format URL (Elena-regularny.Woff2) ("WOFF2"),
       format URL (Elena-Regular.Woff) ("Woff");
}

Jeśli wymieniasz wiele formatów, nowoczesne przeglądarki wybiorą pierwszy format, który obsługują oparte na formacie Wskazówka. Dlatego ważne jest, aby liczyć formaty czcionek internetowych w kolejności najlepszej kompresji do najmniejszej kompresji.

Mimo że Wskazówki do formatu są opcjonalne, zawsze je dołączają - pozwalają przeglądarce wiedzieć o formacie bez konieczności pobierania czcionki. Na przykład, jeśli przeglądarka nie obsługuje WOFF2, ale działa Woff, może pominąć plik czcionki WOFF2 na podstawie podpowiedzi w formacie.

Przeglądarki obsługują kilka formatów czcionek: OpenType (TrueType), EOF, WOFF i WOFF2. Niektóre przeglądarki obsługują również czcionki SVG, ale są przestarzenione i nie powinny być używane (i nie powinno być mylone z Nowy format OpenType-SVG ).

EOT, WOFF i WOFF2 są technicznie formatami czcionek. Są skompresowane pliki OpenType o różnych stopniach kompresji. Woff2 oferuje najlepszą kompresję, a następnie WOFF i EOT.

W badaniu zasięgu wszystkich przeglądarek możesz przyjść na coś zwanego kuloodporny @ font-face składnia przez fontspring.

Składnia kuloodporna używa EOF, WOFF2, WOFF, surowy OpenType i pliki czcionek SVG dla maksymalnej pokrycia przeglądarki:

 @ font-face {
  Czcionka: Elena;
  SRC: format URL (Elena.eot? #IFIX) ("Embedded-OpenType"),
       format URL (Elena.Woff2) ("WOFF2"),
       format URL (Elena.Woff) ("Woff"),
       format URL (Elena.otf) ("OpenType"),
       format URL (Elena.svg # Elena) ("SVG");
}

Pierwsza linia URL może wyglądać trochę dziwnie. Wersje Internet Explorer 8 i poniżej nie obsługują składni dla wielu formatów czcionek i leczyć całą wartość src. nieruchomość jako adres URL.

Bulletproof Semitax Tricks Internet Explorer 8 i poniżej myślenia, że pozostałe adresy URL są częścią identyfikatora fragmentu pierwszego adresu URL. Ponieważ identyfikatory fragmentów są ignorowane podczas pobierania plików, Internet Explorer 8 i poniżej, po prostu używaj pierwszego adresu URL.

Przeglądarki inne niż Internet Explorer pomijają linię, ponieważ nie obsługują EOT.

Reszta zgłoszeń jest tym, czego można się spodziewać: formaty czcionek wymienione w kolejności preferencji.

Ale czy składnia kuloodporna jest nadal istotna? Nie. Myślę, że to szkodliwe. Czcionki SVG są przestarzewane i obsługiwane tylko przez przeglądarki, które nie są już używane.

Większość stron internetowych obsługuje Internet Explorer 9 i więcej, ale listy składni EOT jako pierwszy preferowany format czcionki. Mimo że Internet Explorer 9 i UP Wspieraj Woff, wersje te nadal pobierają plik EOT, po prostu dlatego, że jest wymieniona.

Ponieważ większość stron internetowych nie obsługuje już starych przeglądarek, bardzo zalecam użycie uproszczonej składni. Ta uproszczona składnia obejmuje wszystkie nowoczesne przeglądarki, a także nieco starsze, które są nadal aktywne, takie jak Android 4.4 i wcześniej:

 @ font-face {
  Czcionka: Elena;
  Format SRC: URL (Elena.Woff2) ("WOFF2"),
       format URL (Elena.Woff) ("Woff"),
       format URL (Elena.otf) ("OpenType");
}

Mimo że nadal stosuje się starsze wersje Androida, na całym świecie poleganie na tych przeglądarkach szybko się staje. Wkrótce prawdopodobnie będziesz mógł również upuścić surowy format opentype i uprościć składnię jeszcze dalej:

 @ font-face {
  Czcionka: Elena;
  Format SRC: URL (Elena.Woff2) ("WOFF2"),
       format URL (Elena.Woff) ("Woff");
}

W tym przypadku ktoś prowadzący starszą przeglądarkę po prostu zobaczy twoje czcionki awaryjne zamiast czcionki internetowej. W porządku; Nadal mogą przeczytać zawartość w czcionce fallback.

Jest inna możliwa wartość dla src. deskryptor. The. lokalny Funkcja ma nazwę lokalnej rodziny czcionek. Jeśli czcionka zostanie zainstalowana w systemie, przeglądarka użyje tego, unikając tym samym dodatkowego pobrania.

 @ font-face {
  Czcionka: Elena;
  SRC: Local ("Elena"),
       format URL (Elena-Regular.Woff2) ("WOFF2"),
       format URL (Elena-Regular.Woff) ("Woff");
}

Chociaż może to wydawać się wspaniałą optymalizacją, nic nie gwarantuje, że lokalna czcionka pasuje do czcionki internetowej.

Możesz uzyskać inną wersję czcionki, czcionki z inną obsługą językową, a nawet całkowicie inną czcionką. Z tego powodu zwykle zalecam nie używam lokalny Funkcja, chyba że znajdziesz te obniżki dopuszczalne.

To jest fragment Bram Stein's Podręcznik Webfont. , z książki od siebie. W nim bada, co należy rozważyć przy wyborze czcionek internetowych, jak korzystać z nich skutecznie i jak zoptymalizować wydajność.

Powiązane artykuły:

Co do diabła jest Blockchain?
30 rozszerzeń chromowanych dla projektantów stron internetowych i devs
20 Niesamowite darmowe czcionki internetowe Google

Jak korzystać z czcionek internetowych

Rodziny czcionek

Formaty czcionek

Jak - Najpopularniejsze artykuły

17 wskazówek dotyczących rysowania twarzy mangi

8 Cechy CSS State-the-art (i jak ich używać)

Co znajduje się w kątach 8?

Jak utworzyć robot papierowy

Utwórz prosty wykres kolorowy

Jak wyrzucić postać w VR

Jak tworzyć niesamowite efekty z kształtami CSS

Utwórz plik kinowy z Photoshopem w 60 sekund

Kategorie