@font-faceReguła pozwala czcionek niestandardowych być ładowane na stronie internetowej. Po dodaniu do arkusza stylów reguła nakazuje przeglądarce pobranie czcionki z miejsca, w którym jest hostowana, a następnie wyświetlenie jej zgodnie z opisem w CSS.
Bez reguły nasze projekty ograniczają się do czcionek już załadowanych na komputerze użytkownika, które różnią się w zależności od używanego systemu. Oto ładny podział istniejących czcionek systemowych.
Najgłębsza możliwa obsługa przeglądarek
Jest to metoda z najgłębszym możliwym wsparciem w tej chwili. @font-faceZasada powinna być dodana do arkusza przed wszelkimi stylami.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Następnie użyj go do stylizacji elementów w następujący sposób:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktyczny poziom obsługi przeglądarki
Sprawy mocno się zmieniają w kierunku WOFF i WOFF 2, więc prawdopodobnie możemy uciec z:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11,50+ | 9+ | 4.4+ | 5.1+ |
Nieco głębsza obsługa przeglądarek
Jeśli potrzebujesz czegoś w rodzaju szczęśliwego środka między pełnym wsparciem a wsparciem praktycznym, obejmie to jeszcze kilka podstaw:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Obsługa super progresywnej przeglądarki
Jeśli stawiamy farmę na WOFF, możemy spodziewać się, że w pewnym momencie sytuacja zmieni się w kierunku WOFF2. Oznacza to, że możemy żyć na krawędzi krwawienia dzięki:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nie | 35+ z flagą | 23+ | Nie | 37 | Nie |
Techniki alternatywne
@import
Chociaż @font-facejest to doskonałe rozwiązanie w przypadku czcionek hostowanych na naszych własnych serwerach, mogą wystąpić sytuacje, w których hostowane rozwiązanie czcionek jest lepsze. Google Fonts oferuje to jako sposób na użycie ich czcionek. Poniżej znajduje się przykład użycia @importdo załadowania czcionki Open Sans z Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Następnie możemy go użyć do stylizacji elementów:
body ( font-family: 'Open Sans', sans-serif; )Jeśli otworzysz adres URL czcionki, możesz zobaczyć całą @font-facepracę wykonywaną za kulisami.
Zaletą korzystania z usługi hostowanej jest to, że prawdopodobnie zawiera ona wszystkie odmiany plików czcionek, co zapewnia głęboką kompatybilność z różnymi przeglądarkami bez konieczności samodzielnego hostowania wszystkich tych plików.
Zobacz Pen Using @import dla niestandardowych czcionek CSS-Tricks (@ css-tricks) w CodePen.
w arkuszu stylów
Podobnie, możesz utworzyć link do tego samego zasobu, co do każdego innego pliku CSS, w dokumencie HTML, a nie w CSS. Korzystając z tego samego przykładu z Google Fonts, użylibyśmy:
Następnie możemy stylizować nasze elementy, podobnie jak inne metody:
body ( font-family: 'Open Sans', sans-serif; )Ponownie, jest to importowanie @font-facereguł, ale zamiast wstawiania ich do naszego arkusza stylów, są one zamiast tego dodawane do naszego HTML .
Zobacz Pen Using dla niestandardowych czcionek CSS-Tricks (@ css-tricks) w CodePen.
Chodzi o to samo… obie techniki pobierają potrzebne zasoby.
Zrozumienie typów plików czcionek
Oryginalny fragment u góry tego posta odnosi się do wielu plików z dziwnymi rozszerzeniami. Przyjrzyjmy się każdemu z nich i lepiej zrozummy, co mają na myśli.
WOFF / WOFF2
Oznacza: Web Open Font Format.
Stworzone do użytku w Internecie i opracowane przez Mozillę we współpracy z innymi organizacjami, czcionki WOFF często ładują się szybciej niż inne formaty, ponieważ używają skompresowanej wersji struktury używanej przez czcionki OpenType (OTF) i TrueType (TTF). Ten format może również zawierać metadane i informacje o licencji w pliku czcionki. Ten format wydaje się być zwycięzcą i do którego zmierzają wszystkie przeglądarki.
WOFF2 to następna generacja WOFF i oferuje lepszą kompresję niż oryginał.
SVG / SVGZ
Oznacza: skalowalną grafikę wektorową (czcionka)
SVG to wektorowe odtworzenie czcionki, dzięki czemu rozmiar pliku jest znacznie mniejszy, a także idealnie nadaje się do użytku mobilnego. Ten format jest jedynym dozwolonym w wersji 4.1 i starszej przeglądarki Safari na iOS. Czcionki SVG nie są obecnie obsługiwane przez przeglądarki Firefox, IE ani IE Mobile. Firefox odłożył implementację na czas nieokreślony, aby skupić się na WOFF.
SVGZ to spakowana wersja SVG.
EOT
Oznacza: wbudowany otwarty typ.
Ten format został stworzony przez firmę Microsoft (oryginalnych innowatorów @font-face) i jest zastrzeżonym standardem plików obsługiwanym tylko przez IE. W rzeczywistości jest to jedyny format rozpoznawany przez IE8 i starsze wersje @font-face.
OTF / TTF
Oznacza: czcionkę OpenType i czcionkę TrueType.
Format WOFF został początkowo stworzony jako reakcja na OTF i TTF, po części dlatego, że formaty te można było łatwo (i nielegalnie) kopiować, jednak OpenType ma możliwości, którymi może zainteresować się wielu projektantów (ligatury i tym podobne).
Uwaga dotycząca wydajności
Czcionki internetowe świetnie nadają się do projektowania, ale ważne jest również, aby zrozumieć ich wpływ na wydajność sieci. Czcionki niestandardowe często powodują spadek wydajności witryn, ponieważ czcionka musi zostać pobrana przed wyświetleniem.
Typowym objawem był krótki moment, w którym czcionki najpierw ładują się jako rezerwowe, a następnie migają do pobranej czcionki. Paul Irish ma na ten temat starszy post (zatytułowany „FOUT”: Flash Of Unstyled Text).
Obecnie przeglądarki domyślnie ukrywają tekst przed załadowaniem niestandardowej czcionki. Lepsze lub gorsze? Ty decydujesz. Możesz sprawować nad tym kontrolę za pomocą różnych technik. Trochę poza zakresem tego artykułu, ale oto trzy artykuły Zacha Leathermana, które pomogą Ci zacząć w króliczej norze:
- Lepsze @ font-face dzięki zdarzeniom ładowania czcionek
- Jak odpowiedzialnie używamy czcionek internetowych lub unikamy znaku @ font-face-palm
- Błysk fałszywego tekstu - jeszcze więcej na temat ładowania czcionek
Oto kilka dodatkowych uwag dotyczących wdrażania niestandardowych czcionek:
Obserwuj rozmiar pliku
Czcionki mogą być zaskakująco ciężkie, więc wybierz opcje, które oferują lżejsze wersje. Na przykład preferuj zestaw czcionek o rozmiarze 50 KB w porównaniu z zestawem czcionek o wadze 400 KB.
Jeśli to możliwe, ogranicz zestaw znaków
Czy naprawdę potrzebujesz pogrubionych i czarnych grubości dla jednej czcionki? Ograniczenie zestawów czcionek do ładowania tylko tego, co jest używane, jest dobrym pomysłem i jest tutaj kilka dobrych wskazówek.
Rozważ czcionki systemowe dla małych ekranów
Wiele urządzeń utknęło na kiepskich połączeniach. Jedną sztuczką może być kierowanie na większe ekrany podczas ładowania niestandardowej czcionki za pomocą @media.
W tym przykładzie ekrany mniejsze niż 1000 pikseli będą zamiast tego wyświetlane jako czcionka systemowa, a ekrany o szerokości i powyżej będą obsługiwały czcionkę niestandardową.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Usługi czcionek
Istnieje wiele usług, które będą hostować czcionki i zapewniać dostęp do czcionek licencjonowanych komercyjnie. Korzyści płynące z korzystania z usługi często sprowadzają się do posiadania dużego wyboru legalnych czcionek, które są dostarczane sprawnie (np. Serwowanie ich w szybkiej sieci CDN).
Oto kilka hostowanych usług czcionek:
- Typografia w chmurze
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Typoteka
- Fonts.com
- Czcionki Google
- Font Squirrel
A co z czcionkami ikon?
To prawda, @ font-face może załadować plik czcionki pełen ikon, których można użyć w systemie ikon. Uważam jednak, że znacznie lepiej jest używać SVG jako systemu ikon. Oto porównanie obu metod.
Więcej zasobów
- Podstawy Google Font API
- Rodziny czcionek CSS