Põhjalik juhend CSS @font-face'i kasutamiseks, sisaldades optimeerimisnippe veebilehe kiiruse ja kasutajakogemuse parandamiseks globaalsele sihtrühmale.
CSS Font Face: Kohandatud fontide laadimise ja optimeerimise strateegiad globaalse veebidisaini jaoks
Tüpograafia mängib veebisaidi disainis kriitilist rolli, kujundades kasutajakogemust ja edastades teie brändi identiteeti. CSS-i @font-face reegel annab arendajatele võimaluse lisada kohandatud fonte otse oma veebisaitidele, pakkudes suuremat kontrolli teksti visuaalse esitluse üle ning võimaldades unikaalsemat ja kaasahaaravamat kasutajakogemust. Vale rakendamine võib aga põhjustada jõudlusprobleeme, mõjutades veebisaidi laadimisaegu ja avaldades negatiivset mõju kasutajate rahulolule, eriti aeglasema internetiühendusega piirkondade kasutajate jaoks.
See põhjalik juhend uurib @font-face'i peensusi, käsitledes parimaid tavasid kohandatud fontide laadimiseks ja optimeerimisstrateegiaid, et tagada sujuv ja jõudlusvõimeline kogemus globaalsele publikule. Süveneme erinevatesse fondivormingutesse, optimeerimistehnikatesse ja täiustatud funktsioonidesse, et aidata teil omandada veebitüpograafia kunsti.
@font-face reegli mõistmine
@font-face reegel on võimas CSS-i at-reegel, mis võimaldab teil määrata kohandatud fondifailid, mis laaditakse alla ja mida kasutatakse teie veebisaidil. See ületab lõhe piiratud hulga süsteemifontide ja laia kohandatud tüpograafia maailma vahel.
Siin on põhisüntaks:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Vaatame komponente lähemalt:
font-family: See omadus määrab nime, mida kasutate kohandatud fondile viitamiseks oma CSS-reeglites. Valige kirjeldav ja unikaalne nimi.src: See omadus määrab fondifailide asukoha. Saate pakkuda mitu allikat, võimaldades brauseril valida oma võimekuse põhjal optimaalse vormingu.format()funktsioon näitab iga faili fondivormingut.font-weight: See omadus määrab fondi kaalu (paksuse). Levinud väärtused onnormal,bold,lighter,bolderja numbrilised väärtused nagu100,400,700jne.font-style: See omadus määrab fondi stiili (ntnormal,italic,oblique).
Kui see on määratletud, saate kohandatud fonti oma CSS-reeglites kasutada nii:
body {
font-family: 'MyCustomFont', sans-serif;
}
See rakendab 'MyCustomFont' fondi kogu teie veebisaidi sisule. sans-serif on varufont, mida kasutatakse juhul, kui kohandatud fondi laadimine ebaõnnestub.
Õigete fondivormingute valimine: globaalne perspektiiv
Erinevad brauserid toetavad erinevaid fondivorminguid. Laia ühilduvuse tagamiseks on ülioluline pakkuda oma fonte mitmes vormingus. Siin on ülevaade levinud fondivormingutest ja nende brauseritoest:
- WOFF2 (Web Open Font Format 2): Kõige kaasaegsem ja enim soovitatud vorming, mis pakub paremat tihendamist ja jõudlust. Toetatud kõikide kaasaegsete brauserite poolt.
- WOFF (Web Open Font Format): Laialdaselt toetatud vorming, mis pakub head tihendamist. Endiselt asjakohane vanemate brauserite jaoks.
- EOT (Embedded Open Type): Spetsiaalselt Internet Exploreri jaoks loodud. Üldiselt pole enam vajalik, välja arvatud juhul, kui peate absoluutselt toetama IE väga vanu versioone.
- TTF (TrueType Font) / OTF (OpenType Font): Vanemad vormingud, mis on üldiselt suurema failimahuga ja vähem veebikasutuseks optimeeritud. Vältige nende otsest kasutamist, kui vähegi võimalik.
- SVG-fondid: Vanem vorming, mida tänapäeval brauseritoe ja muude piirangute tõttu sageli ei kasutata.
Soovitus: Kasutage WOFF2 oma peamise vorminguna ja pakkuge WOFF-i varuvariandina vanemate brauserite jaoks. Kaaluge EOT-i kasutamist ainult siis, kui peate toetama Internet Exploreri väga vanu versioone.
Siin on näide mitme fondivormingu pakkumisest oma @font-face reeglis:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff'),
url('mycustomfont.eot') format('embedded-opentype'); /* Vanema IE jaoks */
font-weight: normal;
font-style: normal;
}
Fondi laadimise strateegiad: kiiruse ja kasutajakogemuse optimeerimine
See, kuidas te oma fonte laadite, võib oluliselt mõjutada teie veebisaidi jõudlust. Siin on mitu fondi laadimise strateegiat, mida saate kasutada:
1. Põhiline fondi laadimine (vaikekäitumine)
Vaikimisi blokeerivad brauserid tavaliselt teksti renderdamise, kuni font on alla laaditud. See võib põhjustada tajutava jõudluse kitsaskoha, kus kasutajad näevad lühikese aja jooksul tühja ekraani või nähtamatut teksti (sageli nimetatakse seda "nähtamatu teksti sähvatuseks" ehk FOIT).
Kuigi seda on lihtne rakendada, ei ole see lähenemine optimaalse kasutajakogemuse saavutamiseks üldiselt soovitatav.
2. font-display omaduse kasutamine
font-display omadus pakub rohkem kontrolli selle üle, kuidas fonte laaditakse ja kuvatakse. See võimaldab teil kohandada käitumist fondi laadimise ajal, pakkudes kasutajatele sujuvamat kogemust. See on enamiku olukordade jaoks soovitatav lähenemine.
Siin on võimalikud väärtused font-display jaoks:
auto: Brauser kasutab oma vaikimisi fondi laadimise strateegiat (tavaliselt FOIT).block: Annab fondile lühikese blokeerimisperioodi ja lõpmatu vahetusperioodi. Brauser peidab esialgu teksti ja kuvab selle siis, kui font on laaditud. Kui fonti ei laadita lühikese aja jooksul (tavaliselt 3 sekundit), kuvatakse varufont.swap: Annab fondile null-blokeerimisperioodi ja lõpmatu vahetusperioodi. Brauser kuvab teksti kohe, kasutades varufonti. Kui kohandatud font on laaditud, vahetatakse tekst kohandatud fondi vastu. See väldib FOIT-i, kuid võib põhjustada "stiilimata teksti sähvatuse" (FOUT).fallback: Annab fondile väga lühikese blokeerimisperioodi ja lühikese vahetusperioodi. See on kompromissblockjaswapvahel. Brauser peidab teksti väga lühikeseks ajaks, seejärel vahetab varufondi vastu, kui kohandatud fonti ei laadita. See jätkab fontide vahetamist lühikese aja jooksul, mille järel see peatub ja kasutab lihtsalt varufonti.optional: Annab fondile äärmiselt lühikese blokeerimisperioodi ja vahetusperioodi puudumise. Kasulik fontide jaoks, mis ei ole lehe esmasel renderdamisel kriitilised (nt fondid, mida kasutatakse ebaolulistes kasutajaliidese elementides).
Soovitused:
- Enamiku stsenaariumide puhul pakub
swapparimat tasakaalu tajutava jõudluse ja visuaalse stabiilsuse vahel. Kasutajad näevad teksti kohe, isegi kui see on esialgu kujundatud varufondiga. - Kasutage
fallback'i, kui soovite minimeerida FOUT-i, kuid eelistate siiski kohandatud fonti. - Kasutage
optional'i mittekriitiliste fontide jaoks, et vältida lehe renderdamise asjatut blokeerimist.
font-display: swap kasutamise näide:
@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
3. Fontide eellaadimine
Fontide eellaadimine võib parandada jõudlust, andes brauserile korralduse fondifailid võimalikult varakult alla laadida. See võib vähendada fondi laadimisega seotud viivitust, mille tulemuseks on kiirem tajutav laadimisaeg.
Kasutage fontide eellaadimiseks <link rel="preload"> silti oma HTML-dokumendi <head> osas:
<link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
Selgitus:
rel="preload": Määrab, et ressurss tuleks eellaadida.href: Määrab fondifaili URL-i.as="font": Määrab eellaaditava ressursi tüübi (antud juhul fondi).type="font/woff2": Määrab fondifaili MIME-tüübi.crossorigin: Nõutav, kui font laaditakse teisest päritolust (nt CDN-ist).
Ettevaatust: Liiga paljude ressursside eellaadimine võib jõudlust negatiivselt mõjutada. Eellaadige ainult need fondid, mis on lehe esmasel renderdamisel kriitilised.
4. Fontide laadimise API (edasijõudnutele)
Fontide laadimise API pakub fondi laadimise üle detailsemat kontrolli. See võimaldab teil tuvastada, millal font on laaditud, jälgida laadimise edenemist ja käsitleda vigu. See võib olla kasulik keerukamate fondi laadimise strateegiate rakendamiseks.
Näide (JavaScript):
document.fonts.load('1em MyCustomFont').then(function() {
// Font on edukalt laaditud
console.log('MyCustomFont loaded!');
});
Fontide laadimise API on keerulisem kasutada kui font-display omadus, kuid see pakub suuremat paindlikkust edasijõudnud kasutusjuhtudel.
Fondifailide optimeerimine: suuruse vähendamine ja jõudluse parandamine
Fondifailide optimeerimine on veebisaidi jõudluse parandamiseks ja laadimisaegade lühendamiseks ülioluline. Siin on mitu tehnikat, mida saate kasutada:
1. Fondi alamhulkade loomine
Enamik fonte sisaldab suurt hulka glüüfe (märke), millest paljusid ei pruugita teie veebisaidil kasutada. Fondi alamhulkade loomine hõlmab kasutamata glüüfide eemaldamist fondifailist, vähendades oluliselt selle mahtu. See on eriti oluline mitme keele toetamisel, kuna fondid võivad sisaldada glüüfe märkide jaoks, mida konkreetses piirkonnas ei kasutata.
Eelised:
- Väiksem fondifaili maht
- Kiiremad allalaadimisajad
- Parem veebisaidi jõudlus
Tööriistad fondi alamhulkade loomiseks:
- FontForge (avatud lähtekoodiga): Võimas töölaua fondiredaktor, mis võimaldab teil fonte käsitsi alamhulkadeks jaotada.
- Glyphhanger (käsurida): Käsurea tööriist, mis tuvastab kasutamata glüüfid ja loob alamhulkasid.
- Veebipõhised fondi alamhulkade loomise tööriistad: Saadaval on mitu veebipõhist tööriista fontide alamhulkade loomiseks, näiteks Font Squirrel's Webfont Generator.
Unicode-range
Mitmekeelsete saitide puhul saab unicode-range CSS-i kirjeldajat kasutada, et määrata, milliste Unicode'i märgivahemike jaoks fonti tuleks kasutada. See võimaldab brauseril alla laadida ainult vajalikud fondi osad, parandades jõudlust. See on eriti kasulik suurte märgisüsteemidega keelte, nagu hiina, jaapani ja korea (CJK) puhul.
Näide:
@font-face {
font-family: 'NotoSansCJK';
src: url('NotoSansCJK-Regular.woff2') format('woff2');
unicode-range: U+4E00-9FFF, /* Levinud CJK ühtlustatud ideograafid */
U+3040-309F, /* Hiragana */
U+30A0-30FF; /* Katakana */
font-weight: normal;
font-style: normal;
}
2. Tihendamine
Veenduge, et teie fondifailid on korralikult tihendatud Gzipi või Brotli abil. Enamik veebiservereid toetab neid tihendusalgoritme, mis võivad edastamise ajal fondifailide mahtu oluliselt vähendada.
Eelised:
- Väiksem failimaht edastamise ajal
- Kiiremad allalaadimisajad
3. SVG-fontide optimeerimine
Kui kasutate SVG-fonte (kuigi üldiselt ei soovitata), optimeerige SVG-faile tööriistadega nagu SVGO (SVG Optimizer), et eemaldada ebavajalikud metaandmed ja vähendada faili mahtu.
4. Muutuvad fondid (Variable Fonts)
Muutuvad fondid on suhteliselt uus fonditehnoloogia, mis võimaldab ühel fondifailil sisaldada mitut kirjastiili variatsiooni, näiteks erinevaid kaalusid, laiuseid ja stiile. See võib oluliselt vähendada üldist failimahtu võrreldes eraldi fondifailide kasutamisega iga variatsiooni jaoks.
Eelised:
- Väiksemad failimahud võrreldes traditsiooniliste fondivormingutega mitme variatsiooni kasutamisel
- Suurem disainipaindlikkus
5. Vahemällu salvestamine
Seadistage oma veebiserver fondifailide korrektseks vahemällu salvestamiseks. See võimaldab brauseritel salvestada fondifailid lokaalselt, vähendades vajadust neid järgmistel külastustel korduvalt alla laadida.
Eelised:
- Kiiremad laadimisajad naasvatele külastajatele
- Vähendatud serveri koormus
Ligipääsetavuse kaalutlused
Kohandatud fontide kasutamisel on oluline arvestada ligipääsetavusega, et tagada teie veebisaidi kasutatavus kõigile, sealhulgas puuetega inimestele.
1. Piisav kontrastsus
Veenduge, et teksti värv pakub taustavärvi suhtes piisavat kontrasti, et vastata WCAG (Web Content Accessibility Guidelines) standarditele. Kasutage kontrastsuse kontrollimise tööriista, et veenduda kontrastsussuhte piisavuses.
2. Loetav fondi suurus
Kasutage piisavalt suurt fondi suurust, et see oleks kergesti loetav, eriti nägemispuudega kasutajate jaoks. Vältige liiga väikeste fondi suuruste kasutamist.
3. Fondi kaal
Valige fondi kaal, mis on kergesti loetav. Vältige liiga õhukeste või heledate fontide kasutamist, kuna need võivad mõne kasutaja jaoks olla raskesti loetavad.
4. Varufondid
Pakkuge oma CSS-reeglites sobivaid varufonte, et tagada teksti loetavus ka siis, kui kohandatud fondi laadimine ebaõnnestub. Valige varufondid, mis on stiililt ja välimuselt sarnased kohandatud fondile.
5. Teksti suuruse muutmine
Veenduge, et kasutajad saaksid teie veebisaidil teksti hõlpsalt suurust muuta, kasutades brauseri suumi või muid ligipääsetavuse tööriistu. Vältige fikseeritud suurusega ühikute (nt pikslite) kasutamist fondi suuruste jaoks. Kasutage selle asemel suhtelisi ühikuid (nt em, rem).
6. Keele atribuudid
Määrake <html> sildil õigesti lang atribuut, et näidata lehe keelt. See aitab ekraanilugejatel ja muudel abitehnoloogiatel teksti korrektselt renderdada.
Näide:
<html lang="et">
<head>
<title>Minu veebisait</title>
</head>
<body>
<p>See on tekst eesti keeles.</p>
</body>
</html>
Brauseriteülene ühilduvus
Veenduge, et teie kohandatud fondid ühilduksid laia valiku brauseritega. Testige oma veebisaiti erinevates brauserites ja seadmetes, et tuvastada ühilduvusprobleeme. Kasutage tööriistu nagu BrowserStack või Sauce Labs, et testida oma veebisaiti erinevates brauserites ja operatsioonisüsteemides.
Kaaluge CSS-i lähtestamise stiililehe (nt Normalize.css) kasutamist, et normaliseerida vaikestiilid erinevates brauserites.
Levinud vead, mida vältida
- Liiga paljude kohandatud fontide kasutamine: Liiga paljude kohandatud fontide kasutamine võib negatiivselt mõjutada jõudlust ja luua segase visuaalse kogemuse. Piirake oma veebisaidil kasutatavate kohandatud fontide arvu maksimaalselt kahe või kolmeni.
- Suurte fondifailide kasutamine: Suured fondifailid võivad laadimisaegu oluliselt pikendada. Optimeerige oma fondifaile ülalpool kirjeldatud tehnikate abil.
- Varufontide pakkumata jätmine: Varufontide pakkumata jätmine võib põhjustada nähtamatut teksti, kui kohandatud fondi laadimine ebaõnnestub.
- Ligipääsetavuse kaalutluste ignoreerimine: Ligipääsetavuse kaalutluste ignoreerimine võib muuta teie veebisaidi puuetega inimestele kasutuskõlbmatuks.
- Erinevates brauserites testimata jätmine: Erinevates brauserites testimata jätmine võib põhjustada ühilduvusprobleeme.
- Fondifailide otse linkimine disaineri saidilt või muudest ebausaldusväärsetest allikatest: Hoidke fonte ainult oma veebisaidil, CDN-is või mainekas fonditeenuses.
Globaalse veebitüpograafia parimad tavad
Globaalsele publikule veebisaitide kujundamisel on oluline arvestada järgmiste veebitüpograafia parimate tavadega:
- Valige fonte, mis toetavad mitut keelt: Valige fondid, mis sisaldavad glüüfe keelte jaoks, mida kavatsete oma veebisaidil toetada.
- Kasutage erinevate keelte jaoks sobivaid fondi suuruseid: Ühe keele jaoks sobivad fondi suurused ei pruugi sobida teisele. Reguleerige fondi suuruseid vastavalt vajadusele, et tagada loetavus erinevates keeltes.
- Arvestage reavahe ja tähevahega: Reavahe ja tähevahe võivad mõjutada loetavust, eriti keerukate märgisüsteemidega keelte puhul. Reguleerige neid väärtusi vastavalt vajadusele loetavuse optimeerimiseks.
- Kasutage sobivat teksti joondust: Sobiv teksti joondus võib sõltuda keelest. Näiteks vasakult paremale kirjutatavad keeled kasutavad tavaliselt vasakpoolset joondust, samas kui paremalt vasakule kirjutatavad keeled kasutavad tavaliselt parempoolset joondust.
- Testige oma veebisaiti erinevate keeltega: Testige oma veebisaiti erinevate keeltega, et tagada tüpograafia korrektne välimus ja hea loetavus.
Näide: globaalse märgitugega fondi kasutamine
Kaaluge fondi nagu Noto Sans kasutamist, mis on loodud toetama laia valikut keeli ja kirjasüsteeme. Google pakub Noto Sansi ja selle paljusid variante (Noto Sans CJK, Noto Sans Arabic jne) tasuta veebifondina.
Kokkuvõte
CSS @font-face'i valdamine ning tõhusate fondi laadimise ja optimeerimise strateegiate rakendamine on üliolulised jõudlusvõimeliste ja visuaalselt atraktiivsete veebisaitide loomiseks globaalsele publikule. Mõistes fondivormingute, laadimistehnikate ja optimeerimismeetodite nüansse, saate pakkuda sujuvat ja kaasahaaravat kasutajakogemust, mis ületab geograafilisi piire ja kultuurilisi erinevusi.
Järgides selles juhendis toodud parimaid tavasid, saate tagada, et teie veebisaidi tüpograafia täiustab selle üldist disaini, parandab jõudlust ja pakub ligipääsetavat kogemust kõigile kasutajatele, sõltumata nende asukohast või seadmest.