@font-facePravilo omogućuje prilagođene fontove da se učita na web-stranici. Jednom dodano u tablicu stilova, pravilo nalaže pregledniku da preuzme font s mjesta na kojem je hostiran, a zatim ga prikazuje kako je navedeno u CSS-u.
Bez pravila, naši su dizajni ograničeni na fontove koji su već učitani na računalo korisnika, a koji se razlikuju ovisno o sustavu koji se koristi. Evo lijepe analize postojećih sistemskih fontova.
Najdublja moguća podrška za preglednik
Ovo je metoda s trenutno najdubljom mogućom podrškom. @font-facePravilo trebalo biti dodan u stilovima prije bilo stilova.
@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 */ )Zatim ga upotrijebite za oblikovanje elemenata poput ovog:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktična razina podrške preglednika
Stvari se jako pomiču prema WOFF-u i WOFF-u 2, tako da se vjerojatno možemo izvući:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3,6+ | 11,50+ | 9+ | 4,4+ | 5.1+ |
Nešto dublja podrška za preglednik
Ako trebate neku vrstu sretnog medija između pune podrške i praktične podrške, ovo će pokriti još nekoliko osnova:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10,1+ | 9+ | 2,2+ | 4,3+ |
Super napredna podrška za preglednik
Ako farmu stavljamo na WOFF, onda možemo očekivati da će se stvari u nekom trenutku pomaknuti prema WOFF2. To znači da možemo živjeti na rubu krvarenja sa:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Ne | 35+ sa zastavom | 23+ | Ne | 37 | Ne |
Alternativne tehnike
@import
Iako @font-faceje izvrstan za fontove koji su hostirani na našim vlastitim poslužiteljima, možda postoje situacije u kojima je rješenje za hostirane fontove bolje. Google Fonts ovo nudi kao način korištenja njihovih fontova. Slijedi primjer upotrebe @importza učitavanje fonta Open Sans iz Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Tada ga možemo koristiti za oblikovanje elemenata:
body ( font-family: 'Open Sans', sans-serif; )Ako otvorite URL za font, zapravo možete vidjeti sav @font-faceposao koji se radi iza scene.
Prednost korištenja hostirane usluge je ta što će vjerojatno obuhvaćati sve varijacije datoteka fontova, što osigurava duboku kompatibilnost više preglednika bez potrebe da sami hostiramo sve te datoteke.
Pogledajte olovku pomoću @import za prilagođene fontove tvrtke CSS-Tricks (@ css-tricks) na CodePenu.
izrada tabele stilova
Slično tome, mogli biste se povezati na isti materijal kao i bilo koju drugu CSS datoteku, u HTML dokumentu, a ne u CSS-u. Koristeći isti primjer iz Google Fontova, ovo bismo koristili:
Zatim svoje elemente možemo oblikovati poput ostalih metoda:
body ( font-family: 'Open Sans', sans-serif; )Opet, ovo je uvoz @font-facepravila, ali umjesto da se ubrizgaju u našu tablicu stilova, ona se umjesto toga dodaju u naš HTML .
Pogledajte Olovka za prilagođene fontove tvrtke CSS-Tricks (@ css-tricks) na CodePenu.
Radi se o istoj stvari ... obje tehnike preuzimaju potrebnu imovinu.
Razumijevanje tipova datoteka fontova
Izvorni isječak na vrhu ovog posta navodi mnogo datoteka sa neobičnim nastavcima. Pređimo na svaki od njih i bolje razumijemo što oni znače.
WOFF / WOFF2
Znači za: Web Open Font Format.
Stvoreni za upotrebu na webu, a razvio ih je Mozilla zajedno s drugim organizacijama, WOFF fontovi često se učitavaju brže od ostalih formata jer koriste komprimiranu verziju strukture koju koriste fontovi OpenType (OTF) i TrueType (TTF). Ovaj format također može sadržavati metapodatke i podatke o licenci u datoteci fonta. Čini se da je ovaj format pobjednik i kamo su usmjereni svi preglednici.
WOFF2 je sljedeća generacija WOFF-a i može se pohvaliti boljom kompresijom od izvorne.
SVG / SVGZ
Oznake za: Skalabilna vektorska grafika (font)
SVG je vektorska ponovna izrada fonta, što ga čini puno lakšim u veličini datoteke, a također ga čini idealnim za mobilnu upotrebu. Ovaj je format jedini koji dopušta verzija 4.1 i starije verzije Safarija za iOS. SVG fontove trenutno ne podržavaju Firefox, IE ili IE Mobile. Firefox je odgodio implementaciju na neodređeno vrijeme kako bi se usredotočio na WOFF.
SVGZ je zigovana verzija SVG-a.
EOT
Stoje za: ugrađeni otvoreni tip.
Ovaj je format stvorio Microsoft (izvorni inovatori tvrtke @font-face), a vlasnički je standard datoteke koji podržava samo IE. Zapravo je to jedini format koji će IE8 i stariji prepoznati prilikom upotrebe @font-face.
OTF / TTF
Znači za: OpenType font i TrueType font.
Format WOFF u početku je stvoren kao reakcija na OTF i TTF, dijelom i zato što se ti formati mogu lako (i ilegalno) kopirati, međutim, OpenType ima mogućnosti koje bi mnoge dizajnere mogle zanimati (ligature i slično).
Napomena o izvedbi
Web fontovi izvrsni su za dizajn, ali važno je razumjeti i njihov utjecaj na web performanse. Prilagođeni fontovi često uzrokuju da web-lokacije postignu uspjeh jer se font mora preuzeti prije prikazivanja.
Uobičajeni simptom bio je kratki trenutak u kojem se fontovi prvo učitavaju kao zamjenski, a zatim trepću na preuzeti font. Paul Irish o tome ima stariji post (nazvan "FOUT": Flash Of Unstyled Text).
Danas preglednici obično skrivaju tekst prije nego što se prilagođeni font učita prema zadanim postavkama. Bolje ili gore? Ti odluči. Možete izvršiti određenu kontrolu nad tim putem različitih tehnika. Malo je izvan dometa ovog članka, ali evo tri članaka Zacha Leathermana kako biste započeli niz zečju rupu:
- Bolje @ font-face s Font Load Events
- Kako odgovorno koristimo web fontove ili, izbjegavajući @ font-face-palm
- Bljesak lažnog teksta - još više o učitavanju fontova
Evo još nekih razmatranja prilikom implementacije prilagođenih fontova:
Pripazite na veličinu datoteke
Fontovi mogu biti iznenađujuće teški, zato se priklonite opcijama koje nude lakše verzije. Na primjer, preferirajte skup fontova koji je 50 KB u odnosu na onaj koji teži 400 KB.
Ako je moguće, ograničite skup znakova
Trebaju li vam stvarno podebljani i crni utezi za jedan font? Ograničiti svoje skupove fontova da učitavaju samo ono što se koristi dobra je ideja, a ovdje postoji nekoliko dobrih savjeta.
Razmotrite sistemske fontove za male zaslone
Mnogi su uređaji zapeli na usranim vezama. Jedan bi trik mogao biti ciljanje većih zaslona prilikom učitavanja prilagođenog fonta pomoću @media.
U ovom primjeru zaslonima manjim od 1000 piksela umjesto toga poslužit će se sistemski font, a zaslonima širokim i višim prilagođeni font.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Usluge fonta
Postoji niz usluga koje će ugostiti fontove i pružiti pristup fontovima s komercijalnom licencom. Blagodati korištenja usluge često se svode na to da se velik izbor pravnih fontova isporučuje učinkovito (npr. Posluživanje na brzom CDN-u).
Evo nekoliko hosting usluga fontova:
- Tipografija u oblaku
- Typekit
- Fontdeck
- Webtip
- Fontspring
- Tipoteka
- Fonts.com
- Googleovi fontovi
- Font Vjeverica
Što je s fontovima ikona?
Istina je, @ font-face može učitati datoteku fonta punu ikona koje se mogu koristiti za sustav ikona. Međutim, mislim da vam je daleko bolje da koristite SVG kao sustav ikona. Evo usporedbe dviju metoda.
Više resursa
- Osnove API-ja Google Font
- CSS obitelji fontova