@font-facePravidlo povoluje vlastních písem má být naloženo na webové stránce. Jakmile je pravidlo přidáno do šablony stylů, instruuje prohlížeč, aby stáhl písmo z místa, kde je hostováno, a poté jej zobrazil, jak je uvedeno v CSS.
Bez pravidla jsou naše návrhy omezeny na písma, která jsou již načtena do počítače uživatele, která se liší v závislosti na použitém systému. Zde je pěkný rozpis stávajících systémových písem.
Podpora nejhlubších možných prohlížečů
Toto je metoda s nejhlubší možnou podporou právě teď. @font-facePravidlo by měl být přidán do stylů před všemi styly.
@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 */ )Pak jej použijte ke stylizaci prvků, jako je tento:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktická úroveň podpory prohlížeče
Věci se silně mění směrem k WOFF a WOFF 2, takže se pravděpodobně můžeme dostat pryč s:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5,1+ | 3,6+ | 11,50+ | 9+ | 4,4+ | 5,1+ |
Mírně hlubší podpora prohlížeče
Pokud potřebujete jakési šťastné médium mezi plnou podporou a praktickou podporou, pokryje to několik dalších základen:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10,1+ | 9+ | 2.2+ | 4,3+ |
Super progresivní podpora prohlížeče
Pokud stavíme farmu na WOFF, pak můžeme očekávat, že se věci v určitém okamžiku posunou směrem k WOFF2. To znamená, že můžeme žít na okraji krvácení s:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Ne | 35+ s vlajkou | 23+ | Ne | 37 | Ne |
Alternativní techniky
@import
I když @font-faceje vynikající pro písma, která jsou hostována na našich vlastních serverech, mohou nastat situace, kdy je hostované řešení písem lepší. Google Fonts to nabízí jako způsob, jak používat svá písma. Následuje příklad použití @importk načtení písma Open Sans z písem Google:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Pak jej můžeme použít ke stylování prvků:
body ( font-family: 'Open Sans', sans-serif; )Pokud otevřete adresu URL písma, můžete skutečně vidět veškerou @font-facepráci prováděnou v zákulisí.
Výhodou používání hostované služby je, že je pravděpodobné, že bude zahrnovat všechny varianty souborů písem, což zajišťuje hlubokou kompatibilitu mezi prohlížeči, aniž bychom museli všechny tyto soubory hostovat sami.
Podívejte se na Pen pomocí @import pro vlastní písma od CSS-Tricks (@ css-tricks) na CodePen.
stylů
Podobně můžete odkazovat na stejné dílo jako na jakýkoli jiný soubor CSS, a to v dokumentu HTML, nikoli v CSS. Na stejném příkladu z Google Fonts bychom použili toto:
Poté můžeme stylovat naše prvky jako ostatní metody:
body ( font-family: 'Open Sans', sans-serif; )Opět se jedná o import @font-facepravidel, ale namísto jejich vložení do naší šablony stylů se místo toho přidají do našeho HTML .
Podívejte se na Používání pera pro vlastní písma od CSS-Tricks (@ css-tricks) na CodePen.
Je to o stejné věci ... obě techniky stahují potřebná aktiva.
Vysvětlení typů souborů písem
Původní úryvek v horní části tohoto příspěvku odkazuje na mnoho souborů s podivnými příponami. Pojďme si každý z nich projít a lépe porozumět tomu, co znamenají.
WOFF / WOFF2
Zkratky pro: Web Open Font Format.
Písma WOFF, vytvořená pro použití na webu a vyvinutá společností Mozilla ve spolupráci s jinými organizacemi, se často načítají rychleji než jiné formáty, protože používají komprimovanou verzi struktury používanou fonty OpenType (OTF) a TrueType (TTF). Tento formát může také zahrnovat metadata a licenční informace v souboru písma. Tento formát se zdá být vítězem a je zaměřen na všechny prohlížeče.
WOFF2 je další generací WOFF a může se pochlubit lepší kompresí než originál.
SVG / SVGZ
Znamená: Scalable Vector Graphics (Font)
SVG je vektorové opětovné vytvoření písma, díky čemuž je velikost souboru mnohem světlejší a je také ideální pro mobilní použití. Tento formát je jediný povolený verzí 4.1 a nižší verzí Safari pro iOS. Fonty SVG nejsou v současné době podporovány Firefoxem, IE ani IE Mobile. Firefox odložil implementaci na neurčito, aby se zaměřil na WOFF.
SVGZ je verze SVG zazipovaná.
EOT
Znamená: vložený otevřený typ.
Tento formát vytvořil Microsoft (původní inovátoři @font-face) a jedná se o proprietární souborový standard podporovaný pouze IE. Ve skutečnosti je to jediný formát, který IE8 a níže rozpozná při použití @font-face.
OTF / TTF
Znamená: Písmo OpenType a Písmo TrueType.
Formát WOFF byl původně vytvořen jako reakce na OTF a TTF, zčásti proto, že tyto formáty lze snadno (a nelegálně) kopírovat, OpenType však má funkce, které by mnoho designérů mohly zajímat (ligatury apod.).
Poznámka k výkonu
Webová písma jsou skvělá pro design, ale je také důležité pochopit jejich dopad na výkon webu. Vlastní písma často způsobují, že weby dosáhnou úspěchu, protože písmo musí být před zobrazením staženo.
Běžným příznakem býval krátký okamžik, kdy se písma nejprve načetla jako záložní, poté blikala na stažené písmo. Paul Irish má k tomu starší příspěvek (nazvaný „FOUT“: Flash Of Unstyled Text).
V dnešní době prohlížeče obvykle skryjí text před načtením vlastního písma ve výchozím nastavení. Lepší nebo horší? Vy se rozhodnete. Nad tím můžete získat určitou kontrolu pomocí různých technik. Trochu mimo rozsah tohoto článku, ale tady je trifecta článků Zach Leatherman, které vám pomohou začít králičí nivou:
- Lepší @ font-face s událostmi načítání písma
- Jak zodpovědně používáme webová písma, nebo se vyhýbáme @ font-face-palm
- Záblesk fauxového textu - stále více při načítání písem
Tady je několik dalších úvah při implementaci vlastních písem:
Sledujte velikost souboru
Fonty mohou být překvapivě těžké, takže se přiklánějte k možnostem, které nabízejí lehčí verze. Například upřednostňujte sadu písem o velikosti 50 kB oproti písmu o hmotnosti 400 kB.
Pokud je to možné, omezte znakovou sadu
Opravdu potřebujete tučné a černé váhy pro jedno písmo? Dobrý nápad je omezit sady písem na načítání pouze toho, co se používá, a zde je několik dobrých tipů.
Zvažte systémová písma pro malé obrazovky
Mnoho zařízení se zaseklo na mizerném připojení. Jedním trikem může být cílení na větší obrazovky při načítání vlastního písma pomocí @media.
V tomto příkladu se obrazovkám menším než 1 000 pixelů místo toho zobrazí systémové písmo a obrazovkám širokým a vyšším se přidá vlastní písmo.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Služby písem
Existuje řada služeb, které budou hostovat písma a zajišťovat přístup také ke komerčně licencovaným písmům. Výhody používání služby se často snižují k efektivnímu poskytování velkého výběru legálních písem (např. Jejich poskytování na rychlém CDN).
Zde je několik hostovaných služeb písem:
- Cloudová typografie
- Typekit
- Fontdeck
- Webový typ
- Fontspring
- Typotheque
- Fonts.com
- Fonty Google
- Písmo Veverka
A co ikonová písma?
Je pravda, že @ font-face může načíst soubor písem plný ikon, které lze použít pro systém ikon. Myslím si však, že je mnohem lepší používat SVG jako systém ikon. Zde je srovnání těchto dvou metod.
Další zdroje
- Základy Google Font API
- Skupiny písem CSS