@font-faceTaisyklė leidžia pasirinktinius šriftus būti įkeltas į tinklalapį. Įtraukta į stiliaus lapą, taisyklė nurodo naršyklei atsisiųsti šriftą iš ten, kur jis yra, tada rodyti jį, kaip nurodyta CSS.
Be taisyklės, mūsų dizainas apsiriboja šriftais, kurie jau yra įkelti į vartotojo kompiuterį, kurie skiriasi priklausomai nuo naudojamos sistemos. Štai gražus esamų sistemos šriftų suskirstymas.
Giliausia įmanoma naršyklės pagalba
Tai metodas, kuriam šiuo metu suteikiama kuo gilesnė parama. @font-faceTaisyklė turėtų būti įtraukta į stilių prieš bet kokius stilių.
@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 */ )Tada naudokite jį kurdami tokius elementus:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Praktinis naršyklės palaikymo lygis
Viskas labai krypsta link WOFF ir WOFF 2, todėl tikriausiai galime išsisukti:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Šiek tiek gilesnė naršyklės pagalba
Jei jums reikia tam tikros laimingos terpės tarp visiškos paramos ir praktinės paramos, tai apims dar keletą pagrindų:
@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 | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 3,5 ir daugiau | 3+ | 3,5 ir daugiau | 10,1+ | 9+ | 2.2+ | 4.3+ |
„Super Progressive“ naršyklės palaikymas
Jei mes sodiname ūkį WOFF, galime tikėtis, kad tam tikru momentu viskas pasikeis link WOFF2. Tai reiškia, kad mes galime gyventi kraujuojančiame krašte:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| 36+ | Ne | 35+ su vėliava | 23+ | Ne | 37 | Ne |
Alternatyvūs metodai
@import
Nors @font-facetai puikiai tinka šriftui, kuris priglobtas mūsų pačių serveriuose, gali būti situacijų, kai priglobto šrifto sprendimas yra geresnis. „Google Fonts“ siūlo tai kaip būdą naudoti jų šriftus. Toliau pateiktas @import„Open Sans“ šrifto įkėlimo iš „Google Fonts“ pavyzdys :
@import url(//fonts.googleapis.com/css?family=Open+Sans);Tada mes galime jį naudoti stiliaus elementams:
body ( font-family: 'Open Sans', sans-serif; )Jei atidarote šrifto URL, iš tikrųjų galite pamatyti visą @font-faceužkulisiuose atliekamą darbą.
Naudojant priglobtą paslaugą, pranašumas yra tas, kad ji greičiausiai apims visus šriftų failų variantus, o tai užtikrina gilų kelių naršyklių suderinamumą nereikalaujant visų tų failų.
Žr. „Pen“ naudojant „CSim-Tricks“ (@ css-tricks) pasirinktinius šriftus naudojant „@import“ „CodePen“.
stiliaus lapo sudarymas
Panašiai galite susieti su tuo pačiu ištekliumi kaip su bet kuriuo kitu CSS failu HTML dokumente, o ne CSS. Naudodami tą patį „Google“ šriftų pavyzdį, tai mes ir naudotume:
Tada galime suformuoti savo elementus, kaip ir kitus metodus:
body ( font-family: 'Open Sans', sans-serif; )Vėlgi, tai yra @font-facetaisyklių importavimas, tačiau vietoj to, kad jos būtų įtrauktos į mūsų stiliaus lentelę, jos būtų pridėtos prie HTML .
„CodePen“ skaitykite „Rašiklį naudodami pasirinktinius CSS-Tricks šriftus“ (@ css-tricks).
Tai susiję su tuo pačiu dalyku ... abu metodai parsisiunčia reikalingą turtą.
Šrifto failų tipų supratimas
Originalus fragmentas šio įrašo viršuje nurodo daugybę failų su keistais plėtiniais. Peržiūrėkime kiekvieną iš jų ir geriau supraskime, ką jie reiškia.
WOFF / WOFF2
Skirta: „ Web Open“ šrifto formatas.
Sukurti naudoti žiniatinklyje ir sukurti „Mozilla“ kartu su kitomis organizacijomis, WOFF šriftai dažnai įkeliami greičiau nei kiti formatai, nes juose naudojama suspausta „OpenType“ (OTF) ir „TrueType“ (TTF) šriftų versija. Šis formatas taip pat gali apimti metaduomenis ir licencijos informaciją šrifto faile. Atrodo, kad šis formatas yra nugalėtojas ir kur link eina visos naršyklės.
WOFF2 yra naujos kartos WOFF ir pasižymi geresniu suspaudimu nei originalas.
SVG / SVGZ
Stendai: Scalable Vector Graphics (Šriftas)
SVG yra vektorinis šrifto atkūrimas, todėl failo dydis yra daug lengvesnis ir idealiai tinkamas naudoti mobiliesiems. Šis formatas yra vienintelis, kurį leidžia naudoti „iOS“ skirtos „Safari“ versijos 4.1 ir senesnės versijos. Šiuo metu „Firefox“, „IE“ ar „IE Mobile“ nepalaiko SVG šriftų. „Firefox“ atidėjo įgyvendinimą neribotą laiką, kad sutelktų dėmesį į WOFF.
„SVGZ“ yra „ZIP“ versija su užtrauktuku.
EOT
Skirta: Įterptasis atvirojo tipo.
Šį formatą sukūrė „Microsoft“ (originalūs kūrėjai @font-face) ir tai yra patentuotas failų standartas, palaikomas tik IE. Tiesą sakant, tai vienintelis formatas, kurį atpažins IE8 ir žemesnės versijos @font-face.
OTF / TTF
Reikšmė: „ OpenType“ šriftas ir „TrueType“ šriftas.
WOFF formatas iš pradžių buvo sukurtas kaip reakcija į OTF ir TTF iš dalies, nes šiuos formatus buvo galima lengvai (ir nelegaliai) nukopijuoti. Tačiau „OpenType“ turi galimybių, kurios gali būti įdomios daugeliui dizainerių (ligatūros ir pan.).
Pastaba apie našumą
Žiniatinklio šriftai puikiai tinka dizainui, tačiau taip pat svarbu suprasti jų poveikį interneto našumui. Tinkinti šriftai dažnai sukelia svetainių našumą, nes šriftas turi būti atsisiųstas prieš jį rodant.
Dažniausias simptomas būdavo trumpas momentas, kai šriftai pirmiausia įkeliami kaip atsarginiai, o tada mirksi prie atsisiųsto šrifto. Paulas Irishas turi senesnį įrašą šiuo klausimu (pavadintas „FOUT“: „Flash of Unstyled Text“).
Šiais laikais naršyklės paprastai slepia tekstą, kol pagal numatytuosius nustatymus įkeliamas tinkintas šriftas. Geriau ar blogiau? Tu nuspręsk. Galite tai šiek tiek kontroliuoti naudodami įvairius metodus. Šiek tiek už šio straipsnio ribų, bet čia yra Zacho Leathermano straipsnių trifektas, kuris padės jums pradėti triušio skylę:
- „Better @ font-face“ su „Font Load Events“
- Kaip atsakingai naudojame žiniatinklio šriftus arba vengiame @ font-face-palm
- „Faux“ teksto blykstė - dar daugiau informacijos apie šrifto įkėlimą
Toliau pateikiami dar keli aspektai diegiant pasirinktinius šriftus:
Stebėkite failo dydį
Šriftai gali būti stebėtinai sunkūs, todėl pasirenkate lengvesnes versijas. Pavyzdžiui, pirmenybė teikiama šriftų rinkiniui, kuris yra 50 KB, palyginti su tuo, kuris sveria 400 KB.
Jei įmanoma, apribokite simbolių rinkinį
Ar jums tikrai reikalingi juodi ir juodi vieno šrifto svoriai? Gera idėja apriboti šriftų rinkinių įkėlimą tik į tai, kas naudojama, yra keletas gerų patarimų.
Apsvarstykite mažų ekranų sistemos šriftus
Daugelis prietaisų yra įstrigę ant nemalonių jungčių. Vienas triukas gali būti nukreipti į didesnius ekranus, kai įkeliamas pasirinktinis šriftas naudojant @media.
Šiame pavyzdyje mažesniems nei 1000 taškų taškų ekranams vietoj jų bus pateiktas sistemos šriftas, o pločio ir didesniems ekranams - pasirinktinis šriftas.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Šrifto paslaugos
Yra daugybė paslaugų, kurios talpins šriftus ir suteiks prieigą prie komerciškai licencijuotų šriftų. Paslaugos naudojimo pranašumai dažnai pasireiškia tuo, kad efektyviai pristatomas didelis teisėtų šriftų pasirinkimas (pvz., Pateikimas greitai CDN).
Štai keletas priglobtų šriftų paslaugų:
- Debesų tipografija
- Typekit
- „Fontdeck“
- Tinklo tipas
- „Fontspring“
- Tipoteka
- Šriftai.com
- „Google“ šriftai
- Šrifto voverė
Ką apie piktogramų šriftus?
Tiesa, @ font-face gali įkelti šrifto failą, kuriame yra daug piktogramų, kurias galima naudoti piktogramų sistemai. Tačiau manau, kad jums kur kas geriau naudoti SVG kaip piktogramų sistemą. Štai dviejų metodų palyginimas.
Daugiau išteklių
- „Google Font API“ pagrindai
- CSS šriftų šeimos
