Toto @font-facepravidlo umožňuje načítať vlastné písma na webovú stránku. Po pridaní do šablóny štýlov pravidlo nariadi prehliadaču, aby stiahol písmo z miesta, kde je hostené, a potom ho zobrazovať tak, ako je uvedené v CSS.
Bez pravidla sú naše návrhy obmedzené na písma, ktoré sú už načítané v počítači používateľa, ktoré sa líšia v závislosti od použitého systému. Tu je pekný rozpis existujúcich systémových fontov.
Najhlbšia možná podpora prehľadávača
Toto je metóda s čo najhlbšou podporou práve teraz. @font-facePravidlo by mal byť pridaný do štýlov pred všetkými štýlmi.
@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 */ )Potom ho použite na štýl prvkov, ako je tento:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktická úroveň podpory prehľadávača
Veci sa výrazne posúvajú smerom k WOFF a WOFF 2, takže pravdepodobne môžeme uniknúť:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5,1+ | 3,6+ | 11,50+ | 9+ | 4,4+ | 5,1+ |
Mierne hlbšia podpora prehľadávača
Ak potrebujete akési šťastné médium medzi plnou a praktickou podporou, pokryje to ešte niekoľko základov:
@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 | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10,1+ | 9+ | 2,2+ | 4,3+ |
Superprogresívna podpora prehľadávača
Ak staviame farmu na WOFF, potom môžeme očakávať, že sa veci v určitom okamihu posunú smerom k WOFF2. To znamená, že môžeme žiť na hranici krvácania s:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nie | 35+ s vlajkou | 23+ | Nie | 37 | Nie |
Alternatívne techniky
@import
Aj keď @font-faceje to vynikajúce pre písma hostená na našich vlastných serveroch, môžu nastať situácie, keď bude riešenie hostovaného písma lepšie. Google Fonts to ponúka ako spôsob použitia svojich typov písma. Nasleduje príklad použitia @importna načítanie písma Open Sans z typov písma Google:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Potom ho môžeme použiť na štýl prvkov:
body ( font-family: 'Open Sans', sans-serif; )Ak otvoríte adresu URL písma, uvidíte skutočne všetku @font-faceprácu, ktorá sa robí v zákulisí.
Výhodou používania hostovanej služby je, že je pravdepodobné, že bude obsahovať všetky variácie súborov písma, čo zaručuje hlbokú kompatibilitu medzi rôznymi prehliadačmi bez toho, aby sme museli všetky tieto súbory hostovať sami.
Prečítajte si Pero pomocou @import pre vlastné písma od CSS-Tricks (@ css-tricks) na CodePen.
šablónu so štýlmi
Podobne môžete odkazovať na rovnaké dielo ako s akýmkoľvek iným súborom CSS, a to v dokumente HTML a nie v CSS. Použitím rovnakého príkladu z Google Fonts by sme použili toto:
Potom môžeme naše prvky štýlovať ako iné metódy:
body ( font-family: 'Open Sans', sans-serif; )Opäť ide o import @font-facepravidiel, ale namiesto toho, aby ste ich vložili do našej šablóny so štýlmi, pridajú sa namiesto toho do nášho HTML .
Prečítajte si tému Používanie pera pre vlastné písma od CSS-Tricks (@ css-tricks) na CodePen.
Je to o tom istom ... obe techniky sťahujú potrebné prostriedky.
Pochopenie typov súborov písma
Originálny úryvok v hornej časti tohto príspevku odkazuje na veľa súborov s podivnými príponami. Prejdime si každú z nich a lepšie pochopíme, čo majú na mysli.
WOFF / WOFF2
Skratky pre: Web Open Font Format.
Písma WOFF, ktoré boli vytvorené na použitie na webe a vyvinuté spoločnosťou Mozilla v spolupráci s inými organizáciami, sa často načítajú rýchlejšie ako iné formáty, pretože používajú komprimovanú verziu štruktúry používanej vo fontoch OpenType (OTF) a TrueType (TTF). Tento formát môže obsahovať aj metadáta a licenčné informácie v súbore písma. Tento formát sa zdá byť víťazom a smeruje do všetkých prehľadávačov.
WOFF2 je ďalšia generácia WOFF a môže sa pochváliť lepšou kompresiou ako originál.
SVG / SVGZ
Znamená: Škálovateľná vektorová grafika (písmo)
SVG je vektorová re-tvorba písma, ktorá výrazne zmenšuje veľkosť súboru a je tiež ideálna na mobilné použitie. Tento formát je jediný, ktorý umožňuje verzia 4.1 a nižšia verzia Safari pre iOS. Firefox, IE alebo IE Mobile písma SVG momentálne nepodporujú. Firefox odložil implementáciu na neurčito, aby sa zameral na WOFF.
SVGZ je verzia SVG so zipsom.
EOT
Znamená: Embedded Open Type.
Tento formát vytvoril Microsoft (pôvodní inovátori @font-face) a je to vlastný súborový štandard podporovaný iba IE. V skutočnosti je to jediný formát, ktorý IE8 a nižšie rozpozná pri použití @font-face.
OTF / TTF
Znamená: Písmo OpenType a Písmo TrueType.
Formát WOFF bol pôvodne vytvorený ako reakcia na OTF a TTF, čiastočne preto, že tieto formáty bolo možné ľahko (a nelegálne) kopírovať. OpenType má však možnosti, ktoré by mohli zaujímať mnohých dizajnérov (ligatúry a podobne).
Poznámka k výkonu
Webové písma sú vynikajúce pre dizajn, ale je potrebné tiež pochopiť ich vplyv na výkon webu. Vlastné písma často spôsobujú, že webové stránky dosiahnu vysoký výkon, pretože písmo sa musí pred zobrazením stiahnuť.
Bežným príznakom býval krátky okamih, keď sa písma najskôr načítali ako záložné a potom blikali na stiahnuté písmo. Paul Irish má k tomu starší príspevok (nazvaný „FOUT“: Flash Of Unstyled Text).
V dnešnej dobe prehliadače vo všeobecnosti skrývajú text skôr, ako sa predvolene načíta vlastné písmo. Lepšie alebo horšie? Ty rozhodni. Môžete nad tým získať určitú kontrolu pomocou rôznych techník. Trochu mimo rozsah tohto článku, ale tu je trifecta článkov od Zacha Leathermana, ktoré vám pomôžu začať králičou dierou:
- Lepšia @ font-face s udalosťami načítania písma
- Ako zodpovedne používame webové písma, respektíve vyhýbanie sa písmu @ font-face-palm
- Záblesk fauxového textu - ešte viac pri načítaní písma
Tu je niekoľko ďalších úvah pri implementácii vlastných typov písma:
Sledujte veľkosť súboru
Písma môžu byť prekvapivo ťažké, takže sa prikláňajte k možnostiam, ktoré ponúkajú ľahšie verzie. Napríklad uprednostnite sadu fontov s veľkosťou 50 kB oproti písmu s hmotnosťou 400 kB.
Ak je to možné, obmedzte znakovú sadu
Naozaj potrebujete tučné a čierne váhy pre jedno písmo? Dobrý nápad je obmedziť sady písma tak, aby načítavali iba to, čo sa používa, a tu nájdete niekoľko dobrých tipov.
Zvážte systémové písma pre malé obrazovky
Mnoho zariadení je uviaznutých na mizerných spojeniach. Jedným trikom môže byť zacielenie na väčšie obrazovky pri načítaní vlastného písma pomocou @media.
V tomto príklade sa obrazovkám menším ako 1 000 pixelov zobrazí systémové písmo a obrazovkám širokým a vyšším sa prispôsobí vlastné písmo.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Služby písiem
Existuje množstvo služieb, ktoré budú hostiť písma a poskytujú prístup aj ku komerčne licencovaným písmam. Výhody plynúce z využívania služby často spočívajú v efektívnom dodaní veľkého množstva legálnych typov písma (napr. Ich poskytovanie na rýchlom CDN).
Tu je niekoľko hostovaných služieb písiem:
- Cloudová typografia
- Typekit
- Fontdeck
- Webový typ
- Fontspring
- Typotéka
- Fonts.com
- Fonty Google
- Font Squirrel
A čo ikony ikon?
Je pravda, že @ font-face môže načítať súbor s písmami plným ikon, ktoré je možné použiť v systéme ikon. Myslím si však, že je vám oveľa lepšie používať SVG ako systém ikon. Tu je porovnanie týchto dvoch metód.
Ďalšie zdroje
- Základy rozhrania Google Font API
- Rodiny písma CSS