@font-faceNoteikums ļauj custom fontus, kas ir jāiekrauj mājas lapā. Kad tas ir pievienots stila lapai, kārtula pārlūkam uzdod lejupielādēt fontu no tā, kur tas tiek mitināts, un pēc tam parādīt to, kā norādīts CSS.
Bez noteikuma mūsu dizains ir ierobežots ar fontiem, kas jau ir ielādēti lietotāja datorā, un tie atšķiras atkarībā no izmantotās sistēmas. Šeit ir jauks esošo sistēmas fontu sadalījums.
Dziļākais iespējamais pārlūka atbalsts
Šī ir metode ar visdziļāko atbalstu šobrīd. @font-faceNoteikums būtu jāpievieno stilu pirms jebkādu stilu.
@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 */ )Pēc tam izmantojiet, lai veidotu šādus elementus:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktiskais pārlūka atbalsta līmenis
Lietas stipri mainās WOFF un WOFF 2 virzienā, tāpēc mēs, iespējams, varam izkļūt no:
@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+ |
Nedaudz dziļāks pārlūka atbalsts
Ja jums ir nepieciešams sava veida laimīgs medijs starp pilnīgu atbalstu un praktisku atbalstu, tas aptvers vēl dažus pamatus:
@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+ |
Ļoti progresīva pārlūka atbalsts
Ja mēs fermu uzliekam WOFF, tad mēs varam sagaidīt, ka lietas kādā brīdī mainīsies uz WOFF2. Tas nozīmē, ka mēs varam dzīvot asiņojošajā malā ar:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Nē | 35+ ar karogu | 23+ | Nē | 37 | Nē |
Alternatīvās metodes
@import
Lai gan tas @font-faceir lieliski piemērots fontiem, kas tiek mitināti mūsu pašu serveros, var būt situācijas, kad mitinātā fonta risinājums ir labāks. Google fonti to piedāvā kā veidu, kā izmantot viņu fontus. Tālāk ir sniegts piemērs, @importkā ielādēt fontu Open Sans no Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Tad mēs to varam izmantot stila elementiem:
body ( font-family: 'Open Sans', sans-serif; )Atverot fonta URL, jūs faktiski varat redzēt visu @font-facepaveikto darbu aiz ainas.
Hostētā pakalpojuma izmantošanas priekšrocība ir tā, ka, visticamāk, tajā būs iekļautas visas fontu failu variācijas, kas nodrošina dziļu saderību starp pārlūkprogrammām, pašiem neuzņemot visus šos failus.
Skatiet pildspalvveida pilnšļirci, izmantojot CSS-Tricks pielāgotos fontus @import (@ css-tricks) vietnē CodePen.
stilu lapas izveidošana
Līdzīgi jūs varētu saistīt ar to pašu īpašumu kā ar jebkuru citu CSS failu HTML dokumenta vietā, nevis CSS. Izmantojot to pašu Google Fonts piemēru, mēs to izmantotu:
Tad mēs varam veidot elementus tāpat kā citas metodes:
body ( font-family: 'Open Sans', sans-serif; )Atkal tas ir @font-facenoteikumu importēšana, bet tā vietā, lai tos ievadītu mūsu stila lapā, tie tiek pievienoti mūsu HTML .
Skatiet CSP-Tricks (@ css-tricks) pielāgoto fontu izmantošanas pildspalvu vietnē CodePen.
Runa ir par to pašu ... abas metodes lejupielādē nepieciešamos līdzekļus.
Izpratne par fontu failu tipiem
Sākotnējais fragments šīs ziņas augšdaļā atsaucas uz daudziem failiem ar dīvainiem paplašinājumiem. Apskatīsim katru no tiem un labāk izpratīsim to nozīmi.
WOFF / WOFF2
Attiecas uz: Web Open Font Format.
WOFF fonti, kas izveidoti lietošanai tīmeklī un ko izstrādājusi Mozilla kopā ar citām organizācijām, bieži tiek ielādēti ātrāk nekā citi formāti, jo tie izmanto saspiestu struktūras versiju, ko izmanto OpenType (OTF) un TrueType (TTF) fonti. Šis formāts fontu failā var iekļaut arī metadatus un informāciju par licenci. Šis formāts, šķiet, ir uzvarētājs un tas, kur virzās visas pārlūkprogrammas.
WOFF2 ir nākamās paaudzes WOFF un lepojas ar labāku kompresiju nekā oriģināls.
SVG / SVGZ
Stendi: Mērogojama vektorgrafika (fonts)
SVG ir fontu atkārtota izveide vektorā, kas padara to daudz vieglāku faila izmērā, kā arī padara to ideāli piemērotu mobilajai lietošanai. Šis formāts ir vienīgais, ko atļauj Safari operētājsistēmai iOS versija 4.1 un vecākas. SVG fontus pašlaik neatbalsta Firefox, IE vai IE Mobile. Firefox ir atlikis ieviešanu uz nenoteiktu laiku, lai koncentrētos uz WOFF.
SVGZ ir saspiesta SVG versija.
EOT
Stendi: Iegultais atvērtais tips.
Šo formātu izveidoja Microsoft (oriģinālie novatori @font-face), un tas ir patentēts failu standarts, kuru atbalsta tikai IE. Faktiski tas ir vienīgais formāts, kuru IE8 un jaunākas versijas atpazīs, kad to izmantosiet @font-face.
OTF / TTF
Stendi: OpenType fonts un TrueType fonts.
WOFF formāts sākotnēji tika izveidots kā reakcija uz OTF un TTF, daļēji tāpēc, ka šos formātus varēja viegli (un nelegāli) kopēt. Tomēr OpenType ir iespējas, kuras varētu interesēt daudzi dizaineri (ligatūras un tamlīdzīgi).
Piezīme par veiktspēju
Tīmekļa fonti ir lieliski piemēroti dizainam, taču ir svarīgi saprast arī to ietekmi uz tīmekļa veiktspēju. Pielāgoti fonti bieži liek vietnēm iegūt veiktspējas rezultātu, jo fonts pirms tā parādīšanas ir jālejupielādē.
Parasti simptoms bija īss brīdis, kad fonti vispirms tiek ielādēti kā rezerves, pēc tam mirgo līdz lejupielādētajam fontam. Paulam Īram ir vecāks ieraksts šajā jautājumā (dublēts kā “FOUT”: Flash Of Unstyled Text).
Mūsdienās pārlūkprogrammas parasti slēpj tekstu pirms pielāgotā fonta ielādes pēc noklusējuma. Labāk vai sliktāk? Izlem tu. Jūs to varat nedaudz kontrolēt, izmantojot dažādas metodes. Nedaudz ārpus šī raksta darbības jomas, taču šeit ir Zaka Litrermana rakstu trifekts, lai jūs sāktu darbu trušu caurumā:
- Labāk @ font-face ar fontu ielādes notikumiem
- Kā mēs atbildīgi izmantojam tīmekļa fontus vai izvairoties no @ font-face-palm
- Faux teksta zibspuldze - vēl vairāk par fontu ielādi
Šeit ir vēl daži apsvērumi, ieviešot pielāgotus fontus:
Skatieties faila lielumu
Fonti var būt pārsteidzoši smagi, tāpēc izvēlieties iespējas, kas piedāvā vieglākas versijas. Piemēram, dodiet priekšroku fontu kopai, kas ir 50 KB, salīdzinot ar to, kas sver 400 KB.
Ja iespējams, ierobežojiet rakstzīmju kopu
Vai jums tiešām ir nepieciešami treknraksti un melnie svari vienam fontam? Fontu kopu ierobežošana, lai ielādētu tikai to, kas tiek izmantota, ir laba ideja, un šeit ir daži labi padomi.
Apsveriet sistēmas fontus maziem ekrāniem
Daudzas ierīces ir iestrēgušas nežēlīgos savienojumos. Viens triks varētu būt mērķauditorijas atlase lielākiem ekrāniem, ielādējot pielāgoto fontu, izmantojot @media.
Šajā piemērā ekrāniem, kuru izmērs ir mazāks par 1000 pikseļiem, tā vietā tiks rādīts sistēmas fonts, bet platiem un augstākiem ekrāniem - pielāgotais fonts.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Fontu pakalpojumi
Ir vairāki pakalpojumi, kas mitinās fontus un nodrošinās piekļuvi arī komerciāli licencētiem fontiem. Pakalpojuma izmantošanas priekšrocības bieži vien ir saistītas ar lielu juridisko fontu izvēli, kas tiek piegādāta efektīvi (piemēram, tiek ātri pasniegta CDN).
Šeit ir daži mitināti fontu pakalpojumi:
- Mākoņu tipogrāfija
- Typekit
- Fontdeck
- Web tips
- Fontspring
- Tipotēka
- Fonts.com
- Google fonti
- Fonta vāvere
Kas par ikonu fontiem?
Tiesa, @ font-face var ielādēt fontu failu, kas pilns ar ikonām, kuras var izmantot ikonu sistēmai. Tomēr es domāju, ka jums ir daudz labāk izmantot SVG kā ikonu sistēmu. Šeit ir abu metožu salīdzinājums.
Vairāk resursu
- Google Font API pamati
- CSS fontu ģimenes