A @font-faceszabály lehetővé teszi az egyedi betűtípusok betöltését egy weboldalra. Miután hozzáadta a stíluslaphoz, a szabály utasítja a böngészőt, hogy töltse le a betűtípust onnan, ahonnan tárolja, majd jelenítse meg a CSS-ben meghatározottak szerint.
A szabály hiányában a terveink a felhasználó számítógépére már betöltött betűtípusokra korlátozódnak, amelyek a használt rendszertől függően változnak. Íme egy szép bontás a meglévő rendszer betűtípusokról.
A lehető legmélyebb böngésző támogatás
Ez a módszer a lehető legmélyebb támogatással. A @font-faceszabályt minden stílus előtt hozzá kell adni a stíluslaphoz.
@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 */ )Ezután használja az ilyen elemek stílusához:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )A böngésző támogatásának gyakorlati szintje
A dolgok erősen elmozdulnak a WOFF és a WOFF 2 felé, így valószínűleg megúszhatjuk:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3,6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Kissé mélyebb böngésző támogatás
Ha egyfajta boldog közegre van szüksége a teljes támogatás és a gyakorlati támogatás között, ez még néhány alapra kiterjed:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Szuper Progresszív Böngésző Támogatás
Ha a farmot a WOFF-on tartjuk, akkor számíthatunk arra, hogy a dolgok egy bizonyos időpontban elmozdulnak a WOFF2 irányába. Ez azt jelenti, hogy a vérző peremen élhetünk:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nem | 35+ zászlóval | 23+ | Nem | 37 | Nem |
Alternatív technikák
@import
Bár @font-facekiváló a saját szervereinken tárolt betűtípusok esetében, előfordulhatnak olyan helyzetek, amikor a tárolt betűtípus-megoldás jobb. A Google Betűtípusok ezt kínálják a betűtípusaik használatának módjaként. Az alábbiakban bemutatunk egy példát @importaz Open Sans betűtípus betöltésére a Google Betűtípusokból:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Ezután felhasználhatjuk stíluselemekre:
body ( font-family: 'Open Sans', sans-serif; )Ha megnyitja a betűtípus URL-jét, akkor valóban láthatja @font-facea színfalak mögött végzett összes munkát.
A hosztolt szolgáltatás használatának előnye, hogy valószínűleg magában foglalja az összes betűkészlet-változatot, ami biztosítja a böngészők közötti mély kompatibilitást anélkül, hogy ezeket a fájlokat magunknak kellene tárolnunk.
Lásd a Tollal az @import használatával a CSS-Tricks egyedi betűtípusait (@ css-tricks) a CodePen-en.
stíluslap elkészítése
Hasonlóképpen ugyanarra az elemre, mint bármely más CSS-fájlra mutató link, a HTML-dokumentumban, nem pedig a CSS-ben lehet linkelni . A Google Fonts ugyanazon példáját használva ezt használnánk:
Ezután meg tudjuk stílusozni az elemeinket, mint a többi módszert:
body ( font-family: 'Open Sans', sans-serif; )Ez ismét a @font-faceszabályok importálása, de ahelyett, hogy a stíluslapunkba illesztené őket, inkább a HTML-hez adják hozzá.
Lásd: A toll használata CSS-Tricks egyéni betűtípusokhoz (@ css-tricks) a CodePen oldalon.
Ugyanarról szól ... mindkét technika letölti a szükséges eszközöket.
A betűtípusok megismerése
A bejegyzés tetején található eredeti részlet sok különös kiterjesztésű fájlra hivatkozik. Nézzük át mindegyiket, és jobban megértsük, mit jelentenek.
WOFF / WOFF2
A következőkre vonatkozik: Web Open Font Format.
Az internetes felhasználásra létrehozott és a Mozilla által más szervezetekkel közösen kifejlesztett WOFF betűtípusok gyakran gyorsabban töltődnek be, mint más formátumok, mert az OpenType (OTF) és a TrueType (TTF) betűtípusok által használt szerkezet tömörített változatát használják. Ez a formátum metaadatokat és licencinformációkat is tartalmazhat a betűtípusfájlban. Úgy tűnik, hogy ez a formátum a nyerő, és ahova az összes böngésző tart.
A WOFF2 a WOFF következő generációja, és jobb tömörítéssel büszkélkedhet, mint az eredeti.
SVG / SVGZ
Állvány: Skálázható vektorgrafika (betűtípus)
Az SVG a betűtípus vektoros újrateremtése, ami sokkal könnyebbé teszi a fájlméretet, és ideális mobileszközökhöz is. Ez a formátum az egyetlen, amelyet a Safari for iOS 4.1 verziója engedélyez. Az SVG betűtípusokat jelenleg nem támogatja a Firefox, az IE vagy az IE Mobile. A Firefox határozatlan időre elhalasztotta a megvalósítást, hogy a WOFF-ra koncentráljon.
Az SVGZ az SVG csomagolt változata.
EOT
Jelentés: Beágyazott nyitott típus.
Ezt a formátumot a Microsoft (az eredeti fejlesztői @font-face) hozta létre, és ez egy saját fájl szabvány, amelyet csak az IE támogat. Valójában ez az egyetlen formátum, amelyet az IE8 és az azt alatti felismer @font-face.
OTF / TTF
Jelentés: OpenType betűtípus és TrueType betűtípus.
A WOFF formátumot eredetileg az OTF és a TTF reakciójaként hozták létre, részben azért, mert ezeket a formátumokat könnyen (és illegálisan) másolni lehetett. Az OpenType azonban rendelkezik olyan képességekkel, amelyek sok tervezőt érdekelhetnek (ligátumok és hasonlók).
Megjegyzés a teljesítményről
A webes betűtípusok nagyszerűek a tervezéshez, de fontos megérteni azok hatását a web teljesítményére is. Az egyéni betűtípusok gyakran arra késztetik a webhelyeket, hogy teljesítmény-találatot érjenek el, mert a betűtípust le kell tölteni, mielőtt megjelenik.
Gyakori tünet volt egy rövid pillanat, amikor a betűtípusok először tartalékként töltődnek be, majd a letöltött betűtípusra villognak. Paul Irishnek van egy régebbi bejegyzése erről („FOUT” néven: Flash Of Styled Text).
Manapság a böngészők általában elrejtik a szöveget, mielőtt az egyéni betűtípus alapértelmezés szerint betöltődik. Jobb vagy rosszabb? Te döntesz. Különböző technikák segítségével bizonyos irányítást gyakorolhat felettük. Ez a cikk kissé kívül esik, de itt van egy trifecta Zach Leatherman cikkeiből, hogy elindulhasson a nyúl lyukán:
- Jobb @ font-face betűtípus-betöltési eseményekkel
- Hogyan használjuk felelősen a webes betűtípusokat, vagy kerüljük a @ font-face-palm alkalmazást
- Flash of Faux Text - még többet a betűtípus betöltéséről
Íme néhány további szempont az egyéni betűtípusok megvalósításakor:
Figyelje a fájl méretét
A betűtípusok meglepően nehézek lehetnek, ezért hajlítsanak a könnyebb változatokat kínáló opciók felé. Például előnyben részesítsen egy 50KB-os betűkészletet, szemben a 400KB súlyú betűkészlettel.
Ha lehetséges, korlátozza a karakterkészletet
Tényleg szüksége van egy betű félkövér és fekete súlyára? Jó ötlet a betűkészletek korlátozása arra, hogy csak a használtakat töltsék be, és itt van néhány jó tipp.
Vegye fontolóra a rendszer betűtípusait a kis képernyőknél
Sok eszköz ragadt a gagyi kapcsolatokon. Az egyik trükk az lehet, hogy nagyobb képernyőket céloz meg, amikor az egyéni betűtípust használja @media.
Ebben a példában az 1000 képpontnál kisebb képernyők rendszerszintű betűkészletet, a szélesebb és magasabb képernyők pedig az egyéni betűtípust jelenítik meg.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Betűtípus-szolgáltatások
Számos olyan szolgáltatás létezik, amelyek betűtípusokat tárolnak, és hozzáférést biztosítanak a kereskedelmi engedéllyel rendelkező betűtípusokhoz is. A szolgáltatás használatának előnyei gyakran abból fakadnak, hogy a legális betűtípusok széles választéka hatékonyan kerül kézbesítésre (például gyors CDN-en történő kiszolgálás).
Íme néhány tárolt betűtípus-szolgáltatás:
- Felhő tipográfia
- Typekit
- Fontdeck
- Webtípus
- Fontspring
- Typotheque
- Fonts.com
- Google betűtípusok
- Betűtípus Mókus
Mi a helyzet az ikon betűtípusokkal?
Igaz, a @ font-face betölthet egy ikonokkal teli betűtípusfájlt, amelyet egy ikonrendszerhez lehet használni. Úgy gondolom azonban, hogy sokkal jobb, ha az SVG-t ikonrendszerként használja. Itt van a két módszer összehasonlítása.
További források
- A Google Font API alapjai
- CSS betűtípuscsaládok