@font-facePravilo dovoljuje pisave po meri, ki se naložijo na spletni strani. Ko je pravilo enkrat dodano v tabelo slogi, brskalniku naloži, da prenese pisavo od tam, kjer jo gosti, in jo nato prikaže, kot je določeno v CSS.
Brez pravila so naši modeli omejeni na pisave, ki so že naložene v uporabnikov računalnik in se razlikujejo glede na uporabljeni sistem. Tukaj je lepa razčlenitev obstoječih sistemskih pisav.
Najgloblja možna podpora za brskalnik
To je metoda z trenutno najglobljo podporo. @font-facePravilo je treba dodati, da v slogi pred vsemi stilov.
@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 */ )Nato ga uporabite za oblikovanje elementov, kot je ta:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktična raven podpore brskalnika
Stvari se močno premikajo v smeri WOFF in WOFF 2, zato se verjetno lahko rešimo:
@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+ |
Nekoliko globlja podpora za brskalnik
Če potrebujete nekakšen srečen medij med popolno podporo in praktično podporo, bo to zajelo še nekaj osnov:
@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+ |
Super napredna brskalniška podpora
Če postavimo kmetijo na WOFF, potem lahko pričakujemo, da se bodo stvari v določenem trenutku premaknile proti WOFF2. To pomeni, da lahko živimo na robu krvavitve z:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Ne | 35+ z zastavo | 23+ | Ne | 37 | Ne |
Alternativne tehnike
@import
Čeprav @font-faceje odličen za pisave, ki gostujejo na naših lastnih strežnikih, v nekaterih primerih je rešitev gostujoče pisave boljša. Google Fonts to ponuja kot način uporabe njihovih pisav. Sledi primer uporabe @importza nalaganje pisave Open Sans iz Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Nato ga lahko uporabimo za oblikovanje elementov:
body ( font-family: 'Open Sans', sans-serif; )Če odprete URL za pisavo, lahko dejansko vidite vse @font-facedelo, ki se opravlja v zakulisju.
Prednost uporabe gostujoče storitve je, da bo verjetno vključevala vse različice datotek pisave, kar zagotavlja globoko združljivost med brskalniki, ne da bi morali vse te datoteke gostiti sami.
Za pisave po meri s strani CSS-Tricks (@ css-tricks) na CodePen glejte Pen s pomočjo @import.
izdelava slogovnega lista
Podobno bi lahko povezali isto sredstvo kot katero koli drugo datoteko CSS v dokumentu HTML in ne v CSS. Z istim primerom iz Googlovih pisav bi uporabili naslednje:
Nato lahko svoje elemente oblikujemo kot druge metode:
body ( font-family: 'Open Sans', sans-serif; )Ponovno gre za uvoz @font-facepravil, ki pa se namesto, da bi jih vbrizgali v naš slog, namesto tega dodajo v naš HTML .
Oglejte si pisalo Uporaba pisala za pisave po meri s strani CSS-Tricks (@ css-tricks) na CodePenu.
Gre za isto stvar ... obe tehniki preneseta potrebna sredstva.
Razumevanje vrst datotek pisave
Izvirni delček na vrhu te objave se sklicuje na veliko datotek s čudnimi priponami. Poglejmo si vsakega posebej in bolje razumemo, kaj pomenijo.
WOFF / WOFF2
Stoji za: Web Open Font Format.
Pisave WOFF, ustvarjene za uporabo v spletu in jih je razvila Mozilla v sodelovanju z drugimi organizacijami, se pogosto naložijo hitreje kot druge oblike, ker uporabljajo stisnjeno različico strukture, ki jo uporabljata pisavi OpenType (OTF) in TrueType (TTF). Ta oblika lahko vključuje tudi metapodatke in podatke o licenci znotraj datoteke pisave. Zdi se, da je ta oblika zmagovalna in tja, kamor so namenjeni vsi brskalniki.
WOFF2 je naslednja generacija WOFF-a in se ponaša z boljšo kompresijo kot original.
SVG / SVGZ
Stojala za: Prilagodljiva vektorska grafika (pisava)
SVG je vektorska poustvarjanje pisave, zaradi česar je veliko lažja v velikosti datoteke in je tudi idealna za mobilno uporabo. Ta oblika je edina, ki jo dovoljuje različica 4.1 in starejše različice Safari za iOS. Firefox, IE ali IE Mobile trenutno ne podpira pisav SVG. Firefox je za nedoločen čas preložil izvajanje, da bi se osredotočil na WOFF.
SVGZ je stisnjena različica SVG.
EOT
Stojala za: vgrajeni odprti tip.
To obliko je ustvaril Microsoft (prvotni inovatorji podjetja @font-face) in je lastniški standard datotek, ki ga podpira samo IE. Pravzaprav je to edina oblika, ki jo bo IE8 in starejše prepoznala pri uporabi @font-face.
OTF / TTF
Stoji za: pisavo OpenType in pisavo TrueType.
Oblika WOFF je bila sprva ustvarjena kot odziv na OTF in TTF, deloma zato, ker je te formate mogoče enostavno (in nezakonito) kopirati, vendar ima OpenType zmogljivosti, ki bi jih zanimali številni oblikovalci (ligature in podobno).
Opomba o uspešnosti
Spletne pisave so odlične za oblikovanje, vendar je pomembno tudi razumeti njihov vpliv na spletno delovanje. Pisave po meri pogosto povzročijo, da spletna mesta dosežejo uspešnost, ker je treba pisavo prenesti, preden se prikaže.
Pogost simptom je bil včasih kratek trenutek, ko se pisave najprej naložijo kot nadomestne, nato pa utripajo na preneseno pisavo. Paul Irish ima o tem starejšo objavo (poimenovano "FOUT": Flash Of Unstyled Text).
Danes brskalniki privzeto skrivajo besedilo, preden se privzeto naloži pisava po meri. Boljše ali slabše? Ti odločaš. Nad tem lahko nadzorujete z različnimi tehnikami. Ta članek je malo izven področja uporabe, toda tukaj je trifekta člankov Zacha Leathermana, ki vas bodo spustili po zajčji luknji:
- Bolje @ font-face z dogodki nalaganja pisave
- Kako odgovorno uporabljamo spletne pisave ali se izogibamo @ font-face-palm
- Flash of Faux Text - še več o nalaganju pisave
Tu je še nekaj premislekov pri izvajanju pisav po meri:
Pazite na velikost datoteke
Pisave so lahko presenetljivo težke, zato se nagibajte k možnostim, ki ponujajo lažje različice. Na primer, dajte prednost naboru pisav, ki je 50 KB, v primerjavi s tisto, ki tehta 400 KB.
Če je mogoče, omejite nabor znakov
Ali res potrebujete krepke in črne uteži za eno pisavo? Omejevanje nabora pisav na nalaganje samo tistega, kar je uporabljeno, je dobra ideja, o tem pa najdete nekaj dobrih nasvetov.
Razmislite o sistemskih pisavah za majhne zaslone
Številne naprave so obtičale na neumnih povezavah. Eden trik je lahko ciljanje na večje zaslone pri nalaganju pisave po meri z uporabo @media.
V tem primeru bodo zasloni, manjši od 1000 slikovnih pik, namesto tega prejeli sistemsko pisavo, zasloni, ki so široki in višji, pa po meri.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Pisave
Obstajajo številne storitve, ki bodo gostile pisave in omogočile dostop do pisav s komercialno licenco. Koristi uporabe storitve so pogosto posledica učinkovite dostave velikega števila zakonitih pisav (npr. Vročanje na hitrem CDN-ju).
Tu je nekaj gostujočih storitev pisave:
- Oblačna tipografija
- Typekit
- Fontdeck
- Spletni tip
- Fontspring
- Tipoteka
- Fonts.com
- Googlove pisave
- Pisava Veverica
Kaj pa ikone pisav?
Res je, @ font-face lahko naloži datoteko pisave, polno ikon, ki se lahko uporabljajo za sistem ikon. Vendar mislim, da vam je veliko bolje, če SVG uporabljate kot sistem ikon. Tu je primerjava obeh metod.
Več virov
- Osnove API-ja Google Font
- Družine pisav CSS