@font-faceReegel võimaldab kohandatud fonte laetakse veebilehele. Kui see on lisatud stiililehele, käsib reegel brauseril alla laadida font sealt, kus seda hostitakse, ja kuvada see CSS-is määratletud viisil.
Reeglita piirduvad meie kujundused fontidega, mis on juba kasutaja arvutisse laaditud, mis varieeruvad sõltuvalt kasutatavast süsteemist. Siin on olemasolevate süsteemifondide kena jaotus.
Võimalik sügavaim brauseri tugi
See on praegu võimalikult sügava toetusega meetod. @font-faceReegel tuleb lisada laaditabelile enne stiile.
@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 */ )Seejärel kasutage seda selliste elementide kujundamiseks:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Brauseritoe praktiline tase
Asjad nihkuvad tugevalt WOFF-i ja WOFF 2 suunas, nii et võime tõenäoliselt pääseda:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Veidi sügavam brauseri tugi
Kui vajate täieliku toetuse ja praktilise toe vahel omamoodi õnnelikku keskkonda, hõlmab see veel mõnda alust:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3,5+ | 3+ | 3,5+ | 10,1+ | 9+ | 2.2+ | 4.3+ |
Superprogressiivne brauseri tugi
Kui me paneme farmi WOFFile, siis võime eeldada, et asjad muutuvad mingil ajahetkel WOFF2 suunas. See tähendab, et saame elada verejooksu serval:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Ei | 35+ lipuga | 23+ | Ei | 37 | Ei |
Alternatiivsed tehnikad
@import
Ehkki see @font-facesobib suurepäraselt meie enda serverites hostitavate fontide jaoks, võib esineda olukordi, kus hostitud fondilahendus on parem. Google Fonts pakub seda nende fontide kasutamiseks. Järgmine näide on @importfondi Open Sans laadimiseks Google Fontsist:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Siis saame seda kasutada elementide stiilimiseks:
body ( font-family: 'Open Sans', sans-serif; )Kui avate fondi URL-i, näete tegelikult kogu @font-facekulisside taga tehtavat tööd.
Hostitud teenuse kasutamise eeliseks on see, et see sisaldab tõenäoliselt kõiki fondifailide variatsioone, mis tagab brauserite vahelise sügava ühilduvuse, ilma et peaksime kõiki neid faile ise hostima.
Vaadake CodePeni saidil CSS-Tricks (@ css-tricks) kohandatud fontide jaoks rakendust @import.
stiililehe koostamine
Samamoodi võite linkida sama varaga nagu mis tahes muu CSS-failiga, HTML-dokumendis, mitte CSS-is. Kasutades sama näidet Google Fontsist, kasutaksime seda:
Seejärel saame oma elemendid kujundada nagu muud meetodid:
body ( font-family: 'Open Sans', sans-serif; )Jällegi, see on @font-facereeglite importimine, kuid selle asemel, et neid meie stiililehele sisestada, lisatakse need hoopis meie HTML-i .
Vaadake CodePeni saidil CSS-Tricks (@ css-tricks) kohandatud fontide jaoks mõeldud pliiatsi kasutamist.
See on umbes sama asi ... mõlemad võtted laadivad vajalikud varad alla.
Fontifailide tüüpide mõistmine
Selle postituse ülaosas olev originaallõik viitab paljudele kummaliste laiendustega failidele. Vaatame igaühe üle ja saame paremini aru, mida need tähendavad.
WOFF / WOFF2
Tähistab: veebi avatud fondivormingut.
Veebis kasutamiseks loodud ja Mozilla poolt koos teiste organisatsioonidega välja töötatud WOFF-i fondid laaditakse sageli kiiremini kui muud vormingud, kuna nad kasutavad OpenType (OTF) ja TrueType (TTF) fontide kasutatava struktuuri tihendatud versiooni. See formaat võib fondifaili lisada ka metaandmeid ja litsentsiteavet. See vorm näib olevat võitja ja kuhu kõik brauserid suunduvad.
WOFF2 on WOFF-i järgmine põlvkond ja uhke parema tihendusega kui originaal.
SVG / SVGZ
Tähistab: mastaapset vektorgraafikat (font)
SVG on fondi vektori uuesti loomine, mis muudab selle faili suuruse palju kergemaks ja muudab selle ideaalseks ka mobiilseks kasutamiseks. See vorming on ainus, mida lubab iOS-i jaoks mõeldud Safari versioon 4.1 ja uuemad versioonid. SVG-fonte ei toeta praegu Firefox, IE ega IE Mobile. Firefox lükkas rakendamise määramata ajaks edasi, et keskenduda WOFF-ile.
SVGZ on SVG-i pakitud versioon.
EOT
Tähistab: manustatud avatud tüüpi.
Selle vormingu lõi Microsoft (algsed uuendajad @font-face) ja see on patenteeritud failistandard, mida toetab ainult IE. Tegelikult on see ainus formaat, mille IE8 ja uuemad versioonid selle kasutamisel ära tunnevad @font-face.
OTF / TTF
Tähistab: OpenType'i ja TrueType'i fonte.
WOFF-vorming loodi algul reaktsioonina OTF-ile ja TTF-ile, osaliselt seetõttu, et neid formaate sai hõlpsalt (ja ebaseaduslikult) kopeerida. OpenType'il on aga võimalused, mis võivad paljusid disainereid huvitada (ligatuurid jms).
Märkus jõudluse kohta
Veebifondid sobivad suurepäraselt kujundamiseks, kuid on oluline mõista ka nende mõju veebi jõudlusele. Kohandatud fondid põhjustavad saitidele sageli jõudlust, kuna font tuleb enne selle kuvamist alla laadida.
Tavaline sümptom oli varem lühike hetk, kus fondid laaditakse kõigepealt varukoopiaks ja seejärel vilkuvad allalaaditud fondile. Paul Irishil on selle kohta vanem postitus (dubleeritud “FOUT”: Stilistimata teksti välk).
Tänapäeval peidavad brauserid teksti tavaliselt enne, kui kohandatud font vaikimisi laaditakse. Parem või halvem? Sina otsustad. Selle üle saate erinevate tehnikate abil teatud määral kontrolli avaldada. Selle artikli jaoks on see veidi välistatud, kuid siin on trifecta Zach Leathermani artikleid, et saaksite alustada küüliku auku:
- Parem @ font-face fondi laadimise sündmustega
- Kuidas me kasutame veebifonte vastutustundlikult või vältides @ font-face-palm
- Faux-teksti välk - ikka rohkem fontide laadimise kohta
Kohandatud fontide juurutamisel on veel mõned kaalutlused:
Vaadake faili suurust
Fondid võivad olla üllatavalt rasked, nii et kalduge kergemate versioonide pakkumise poole. Näiteks eelistage fondikomplekti, mis on 50KB, võrreldes 400KB-ga.
Kui võimalik, piirake märgistikku
Kas vajate tõesti ühe fondi jaoks rasva ja musta kaalu? Fondikomplektide piiramine ainult kasutatava laadimiseks on hea mõte ja siin on mõned head näpunäited.
Mõelge väikeste ekraanide süsteemifondidele
Paljud seadmed on jultunud ühenduste külge kinni jäänud. Üks trikk võib olla suuremate ekraanide sihtimine kohandatud fondi abil @media.
Selles näites kuvatakse väiksematele kui 1000 pikslit suurustele ekraanidele süsteemifont ja laiematele kui ka kõrgematele ekraanidele kohandatud font.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Fontiteenused
On mitmeid teenuseid, mis hostivad fonte ja võimaldavad juurdepääsu ka kaubanduslikult litsentsitud fontidele. Teenuse kasutamise eelised taanduvad sageli suurel hulgal legaalsete fontide tõhusaks edastamiseks (nt nende kiire CDN-i serveerimine).
Siin on mõned hostitud fonditeenused:
- Pilvede tüpograafia
- Typekit
- Fontdeck
- Veebitüüp
- Fontspring
- Tüpoteek
- Fonts.com
- Google Fonts
- Font Orav
Aga ikoonifondid?
Tõsi, @ font-face saab laadida fondifaili täis ikoone, mida saab kasutada ikoonisüsteemi jaoks. Kuid ma arvan, et teil on palju parem kasutada SVG-d ikoonisüsteemina. Siin on kahe meetodi võrdlus.
Rohkem ressursse
- Google Font API põhitõed
- CSS-i fontide perekonnad