CSS @font-face: Täiustatud fontide laadimise valdamine globaalse veebidisaini jaoks

Tänapäeva globaliseerunud digitaalses maastikus mängib tüpograafia olulist rolli kasutajakogemuse ja brändi identiteedi kujundamisel. CSS-i @font-face-reegel on nurgakivi kohandatud fontide lisamisel oma veebisaidile. Siiski ei piisa lihtsalt fondifailile linkimisest. Et tõeliselt vallata fondide laadimist, peate mõistma täiustatud tehnikaid, mis optimeerivad jõudlust, tagavad brauseriülese ühilduvuse ja parandavad ligipääsetavust mitmekesisele rahvusvahelisele publikule. See põhjalik juhend süveneb nendesse täiustatud aspektidesse, pakkudes teile teadmisi ja tööriistu fontide tõhusaks haldamiseks oma veebiprojektides.

@font-face'i põhitõdede mõistmine

Enne täiustatud tehnikatesse süvenemist vaatame kiirelt üle @font-face'i põhitõed. See CSS-i at-reegel võimaldab teil määrata kohandatud fondifailid, mida brauser saab alla laadida ja kasutada teksti renderdamiseks teie veebilehel.

Põhiline @font-face'i deklaratsioon näeb välja selline:

            @font-face {
 font-family: 'MyCustomFont';
 src: url('mycustomfont.woff2') format('woff2'),
 url('mycustomfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

body {
 font-family: 'MyCustomFont', sans-serif;
}

            

              
                Copy
              
            
          

Vaatame iga osa lähemalt:

• font-family: See on nimi, mida kasutate fondile viitamiseks oma CSS-reeglites. Valige kirjeldav ja unikaalne nimi.
• src: See omadus määrab fondifaili(de) URL-i(d). Laiema brauseritoe tagamiseks peaksite pakkuma mitut fondivormingut (sellest lähemalt hiljem).
• format: See atribuut annab brauserile vihje fondifaili vormingu kohta. See aitab brauseril valida allalaadimiseks sobiva fondifaili.
• font-weight: Määratleb fondi paksuse (nt normal, bold, 100, 900).
• font-style: Määratleb fondi stiili (nt normal, italic, oblique).

Fondivormingud: Brauseriülese ühilduvuse tagamine

Erinevad brauserid toetavad erinevaid fondivorminguid. Et tagada oma veebisaidi ühtlane välimus kõigis brauserites, peaksite oma @font-face'i deklaratsioonis pakkuma mitut fondivormingut. Siin on ülevaade levinumatest fondivormingutest ja nende brauseritoest:

• WOFF2 (Web Open Font Format 2.0): Kõige kaasaegsem ja enim soovitatud vorming. See pakub suurepärast tihendamist ja jõudlust. Toetatud kõigi kaasaegsete brauserite poolt.
• WOFF (Web Open Font Format): Laialdaselt toetatud vorming, mis pakub head tihendamist. Toetatud enamiku kaasaegsete brauserite ja Internet Exploreri vanemate versioonide poolt.
• TTF (TrueType Font): Vanem vorming, mis on veebi jaoks vähem optimeeritud kui WOFF/WOFF2. Nõuab rohkem ribalaiust, seega eelistage WOFF2/WOFF-i.
• EOT (Embedded Open Type): Vananenud vorming peamiselt Internet Exploreri vanemate versioonide jaoks. Kaasaegsetel veebisaitidel ei ole soovitatav kasutada.
• SVG Fonts: Veel üks vananenud vorming. Ei ole soovitatav kasutada.

Tugev @font-face'i deklaratsioon peaks sisaldama vähemalt WOFF2 ja WOFF vorminguid:

            @font-face {
 font-family: 'MyCustomFont';
 src: url('mycustomfont.woff2') format('woff2'),
 url('mycustomfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

            

              
                Copy
              
            
          

Järjekord on oluline: Loetlege esmalt kõige kaasaegsemad vormingud (WOFF2), millele järgnevad vanemad vormingud (WOFF, TTF). See võimaldab brauseritel valida kõige tõhusama vormingu, mida nad toetavad.

Täiustatud fondilaadimise tehnikad

Lisaks põhilisele fondide manustamisele on mitmeid täiustatud tehnikaid, mis võimaldavad fondide laadimise üle peent kontrolli, parandades jõudlust ja kasutajakogemust.

1. Fondi kuvamine: Fondi renderdamiskäitumise kontrollimine

font-display-omadus kontrollib, kuidas brauser tegeleb teksti renderdamisega enne, kui font on täielikult alla laaditud. See pakub mitmeid valikuid, millest igaüks pakub erinevat kompromissi esialgse renderdamiskiiruse ja visuaalse järjepidevuse vahel.

• auto: Brauser kasutab oma vaikimisi fondilaadimise strateegiat. See on tavaliselt sarnane block'iga.
• block: Brauser peidab teksti lühikeseks ajaks, kuni font on alla laaditud. See hoiab ära "stiilita teksti välkumise" (FOUT), kuid võib viivitada esialgset renderdamist. Blokeerimisperiood on tavaliselt väga lühike.
• swap: Brauser renderdab teksti kohe varufondiga ja vahetab selle kohandatud fondi vastu, kui see on alla laaditud. See tagab, et tekst on kohe nähtav, kuid võib põhjustada märgatava FOUT-i.
• fallback: Sarnane swap'ile, kuid lühema blokeerimis- ja vahetusperioodiga. Brauser blokeerib väga lühikeseks ajaks, seejärel vahetab varufondi vastu. Kui kohandatud font teatud aja jooksul ei laadi, kasutatakse varufonti lõputult.
• optional: Brauser otsustab, kas laadida font alla, lähtudes kasutaja ühenduse kiirusest ja muudest teguritest. See seab esikohale renderdamiskiiruse ja võib valida kohandatud fondi allalaadimise asemel varufondi kasutamise. See sobib ideaalselt mittekriitiliste fontide jaoks.

Siin on, kuidas kasutada font-display-omadust:

            @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; /* Või mõni muu väärtus */
}

            

              
                Copy
              
            
          

Õige font-display väärtuse valimine: Parim väärtus sõltub teie konkreetsetest vajadustest ja prioriteetidest.

• Kriitilise teksti (nt pealkirjad, põhitekst) jaoks võivad swap või fallback pakkuda paremat kasutajakogemust, tagades teksti kohese nähtavuse, isegi kui see tähendab lühikest FOUT-i.
• Mittekriitilise teksti (nt dekoratiivsed elemendid, ikoonid) jaoks võib optional parandada jõudlust, vältides ebavajalikke fondide allalaadimisi.
• block'i tuleks kasutada säästlikult, kuna see võib esialgset renderdamist edasi lükata.

2. Font Loading API: Täiustatud kontroll JavaScriptiga

Font Loading API pakub programmilist kontrolli fondide laadimise üle JavaScripti abil. See võimaldab teil:

• Tuvastada, millal fondid on laaditud.
• Käivitada toiminguid pärast fontide laadimist (nt sisu kuvamine, animatsioonide rakendamine).
• Dünaamiliselt laadida fonte vastavalt kasutaja interaktsioonidele või seadme võimekusele.

Näide: Font Loading API kasutamine fondi laadimise tuvastamiseks:

            document.fonts.ready.then(function () {
 // Kõik fondid on laaditud!
 console.log('All fonts loaded!');
 // Lisa body-le klass, mis näitab, et fondid on laaditud
 document.body.classList.add('fonts-loaded');
});

            

              
                Copy
              
            
          

Näide: Konkreetse fondi laadimine ja selle staatuse kontrollimine:

            const font = new FontFace('MyCustomFont', 'url(mycustomfont.woff2)');

font.load().then(function (loadedFont) {
 document.fonts.add(loadedFont);
 console.log('MyCustomFont loaded!');
 document.body.classList.add('my-custom-font-loaded');
}).catch(function (error) {
 console.error('Failed to load MyCustomFont:', error);
});

            

              
                Copy
              
            
          

Varustrateegia: Kui kasutate JavaScripti fondide laadimiseks, rakendage alati varustrateegiat juhuks, kui API-d ei toetata või font ei laadi. See võib hõlmata süsteemifontide kasutamist või kasutajale teate kuvamist.

3. Muutuvad fondid: Revolutsioon tüpograafias

Muutuvad fondid on üksik fondifail, mis võib sisaldada mitut kirjatüübi variatsiooni, näiteks erinevaid paksusi, laiuseid ja stiile. See pakub märkimisväärseid eeliseid traditsiooniliste fondivormingute ees:

• Väiksemad failisuurused: Üks muutuv fondifail võib asendada mitu eraldiseisvat fondifaili, vähendades üldist failisuurust ja parandades laadimisaegu.
• Paindlikkus ja kontroll: Saate CSS-iga fondivariatsioone peenhäälestada, luues täpseid tüpograafilisi hierarhiaid ja visuaalseid efekte.
• Parem jõudlus: Vähem allalaaditavaid andmeid tähendab kiiremat renderdamist ja paremat kasutajakogemust.

Muutuvate fontide kasutamine @font-face'iga:

            @font-face {
 font-family: 'MyVariableFont';
 src: url('myvariablefont.woff2') format('woff2');
 font-weight: 100 900; /* Määratle toetatud paksuste vahemik */
 font-stretch: 50% 200%; /* Määratle toetatud laiuste vahemik */
 font-style: normal;
}

body {
 font-family: 'MyVariableFont', sans-serif;
 font-weight: 400; /* Määra soovitud fondi paksus */
 font-stretch: 100%; /* Määra soovitud fondi laius */
}

            

              
                Copy
              
            
          

CSS-i omadused muutuvate fontide jaoks:

• font-weight: Määrab fondi paksuse (nt 100, 400, 700, 900).
• font-stretch: Määrab fondi laiuse (nt ultra-condensed, condensed, normal, expanded, ultra-expanded). Alternatiivina kasutage protsentuaalseid väärtusi.
• font-style: Määrab fondi stiili (nt normal, italic, oblique).
• font-variation-settings: Võimaldab teil kontrollida fondi disaineri poolt määratletud kohandatud fonditelgi. See omadus võtab vastu sildi-väärtuse paaride loendi (nt 'wght' 400, 'wdth' 100).

Näide: font-variation-settings kasutamine kohandatud telgede kontrollimiseks:

            .my-element {
 font-family: 'MyVariableFont', sans-serif;
 font-variation-settings: 'wght' 600, 'ital' 1;
}

            

              
                Copy
              
            
          

4. Fontide alamosadeks jaotamine: Optimeerimine konkreetsete märgistikute jaoks

Paljud fondid sisaldavad laia märgistikku, sealhulgas glüüfe keelte jaoks, mida te ei pruugi vajada. Alamosadeks jaotamine (subsetting) hõlmab kohandatud fondifaili loomist, mis sisaldab ainult teie veebisaidil kasutatavaid märke. See võib oluliselt vähendada faili suurust, eriti veebisaitide puhul, mis kasutavad peamiselt piiratud märgistikku (nt inglise tähestik, numbrid, kirjavahemärgid).

Tööriistad fontide alamosadeks jaotamiseks:

• FontForge: Tasuta ja avatud lähtekoodiga fondiredaktor, mis võimaldab teil fonte käsitsi alamosadeks jaotada.
• Glyphhanger: Käsurea tööriist, mis analüüsib teie HTML-i ja CSS-i, et tuvastada kasutatud märgid ja genereerida alamosadeks jaotatud fondifail.
• Online Font Subsetting Tools: Mitmed veebipõhised tööriistad pakuvad fondide alamosadeks jaotamise võimalusi (otsige "font subsetter").

Unicode-Range: Erinevate fontide pakkumine erinevatele keeltele

unicode-range'i deskriptor @font-face'i reeglis on võimas tööriist erinevate fondifailide pakkumiseks, lähtudes tekstis esinevatest Unicode'i märkidest. See võimaldab laadida spetsiifilisi fonte erinevate keelte või kirjasüsteemide jaoks, tagades, et märgid renderdatakse korrektselt ja tõhusalt.

Kuidas Unicode-Range töötab:

unicode-range'i deskriptor määrab Unicode'i koodipunktide vahemiku, mille jaoks fonti tuleks kasutada. Brauser laadib fondifaili alla ainult siis, kui tekst sisaldab märke määratud vahemikus. See võimaldab teil määrata erinevaid fondiperesid erinevate märgistike jaoks, parandades oluliselt laadimisaegu, kuna ebavajalikke glüüfe ei laadita.

Näide: Erinevate fontide pakkumine ladina ja kirillitsa märkide jaoks:

            @font-face {
 font-family: 'MyLatinFont';
 src: url('mylatinfont.woff2') format('woff2');
 unicode-range: U+0020-00FF; /* Basic Latin ja Latin-1 Supplement */
}

@font-face {
 font-family: 'MyCyrillicFont';
 src: url('mycyrillicfont.woff2') format('woff2');
 unicode-range: U+0400-04FF; /* Cyrillic */
}

body {
 font-family: 'MyLatinFont', sans-serif;
}

/* Kui tekst sisaldab kirillitsa märke, kasutab brauser automaatselt 'MyCyrillicFont' */

            

              
                Copy
              
            
          

Unicode-Range'i kasutamise eelised:

• Vähendatud failisuurused: Pakkudes erinevaid fonte erinevatele keeltele, saate vältida ebavajalike glüüfide laadimist, mis tulemuseks on väiksemad failisuurused ja kiiremad laadimisajad.
• Parem jõudlus: Väiksemad failisuurused tähendavad kiiremat renderdamist ja paremat kasutajakogemust.
• Täpne märkide renderdamine: Saate tagada, et märgid renderdatakse iga keele jaoks korrektselt, kasutades spetsiaalselt nende märgistike jaoks loodud fonte.
• Globaalne veebidisain: Kriitilise tähtsusega mitmekeelsete veebisaitide toetamisel ja erinevate keelte korrektse renderdamise tagamisel.

Unicode'i vahemike leidmine: Erinevate keelte ja kirjasüsteemide Unicode'i vahemikud leiate Unicode'i konsortsiumi veebisaidilt või veebiotsingu kaudu.

5. Fontide eellaadimine: Kriitiliste fontide prioritiseerimine

Eellaadimine võimaldab teil anda brauserile korralduse laadida fondifail alla nii vara kui võimalik, isegi enne kui see CSS-is leitakse. See võib oluliselt vähendada esialgset renderdamisaega, eriti fontide puhul, mida kasutatakse teie veebisaidi kriitilistes osades (nt pealkirjad, navigeerimine).

<link>-sildi kasutamine eellaadimiseks:

            <link rel="preload" href="mycustomfont.woff2" as="font" type="font/woff2" crossorigin>
            

              
                Copy
              
            
          

Atribuudid:

• rel="preload": Näitab, et ressurss tuleks eellaadida.
• href: Määrab fondifaili URL-i.
• as="font": Määrab eellaaditava ressursi tüübi (font).
• type="font/woff2": Määrab fondifaili MIME-tüübi. Kasutage oma fondivormingu jaoks sobivat MIME-tüüpi.
• crossorigin: Nõutav, kui font asub teisel domeenil. Seadke väärtuseks anonymous või use-credentials sõltuvalt teie CORS-i konfiguratsioonist.

Eellaadimine HTTP päistega: Saate fonte eellaadida ka Link HTTP päise abil:

            Link: <mycustomfont.woff2>; rel=preload; as=font; type=font/woff2; crossorigin
            

              
                Copy
              
            
          

Eellaadimise parimad tavad:

• Eellaadige ainult kriitilisi fonte, mis on olulised teie veebisaidi esialgseks renderdamiseks.
• Vältige liiga paljude fontide eellaadimist, kuna see võib jõudlust negatiivselt mõjutada.
• Veenduge, et teie server on konfigureeritud pakkuma teie fondifailide jaoks õigeid MIME-tüüpe.

Ligipääsetavuse kaalutlused veebifontide puhul

Kuigi kohandatud fondid võivad teie veebisaidi visuaalset atraktiivsust suurendada, on oluline arvestada ligipääsetavusega, et tagada teie sisu kasutatavus kõigile, sealhulgas puuetega inimestele.

• Piisav kontrast: Veenduge, et teksti ja taustavärvide vaheline kontrast vastaks ligipääsetavuse juhistele (WCAG). Halb kontrast võib muuta teksti lugemise vaegnägijatele raskeks.
• Loetav fondi suurus: Kasutage piisavalt suurt fondi suurust, et seda oleks lihtne lugeda. Vältige liiga väikeste fondi suuruste kasutamist. Laske kasutajatel vajadusel fondi suurust reguleerida.
• Selge fondi valik: Valige fondid, mis on loetavad ja kergesti loetavad. Vältige liiga dekoratiivsete või stiliseeritud fontide kasutamist, mida võib olla raske dešifreerida.
• Vältige fontide kasutamist ainult kaunistuseks: Kui font täidab peamiselt dekoratiivset eesmärki, kaaluge selle säästlikku kasutamist või pakkuge ekraanilugejatele alternatiivset teksti (alt-atribuut).
• Testige ekraanilugejatega: Testige oma veebisaiti ekraanilugejatega, et veenduda, et tekst loetakse õigesti ja kogu sisu on ligipääsetav.
• Varufondid: Määrake oma CSS-is varufondiks üldine fondipere (nt sans-serif, serif, monospace). See tagab, et tekst on endiselt nähtav isegi siis, kui kohandatud font ei laadi.

Fondi edastamise optimeerimine: Jõudluse parimad tavad

Isegi täiustatud fondilaadimise tehnikatega on fondi edastamise optimeerimine veebisaidi jõudluse maksimeerimiseks hädavajalik. Siin on mõned peamised parimad tavad:

• Hostige fonte lokaalselt: Fontide hostimine oma serveris pakub tavaliselt paremat jõudlust kui kolmandate osapoolte fonditeenuste kasutamine. See välistab DNS-päringud ja vähendab sõltuvust välistest ressurssidest.
• Kasutage CDN-i (sisu edastamise võrk): Kui hostite oma fonte lokaalselt, kaaluge CDN-i kasutamist nende levitamiseks serveritesse üle maailma. See tagab, et kasutajad saavad fonte alla laadida neile geograafiliselt lähedal asuvast serverist, vähendades latentsust ja parandades laadimisaegu.
• Tihendage fondifailid: Kasutage gzip- või Brotli-tihendust, et vähendada oma fondifailide suurust. Enamik veebiservereid toetab neid tihendusalgoritme.
• Puhverdage fonte: Konfigureerige oma server fondifailide puhverdamiseks, et sama kasutaja neid korduvalt alla ei laadiks. Kasutage puhverdamiskäitumise kontrollimiseks sobivaid puhvripäiseid (nt Cache-Control, Expires).
• Jälgige fondide laadimise jõudlust: Kasutage brauseri arendajate tööriistu või veebi jõudluse jälgimise tööriistu, et jälgida fondide laadimisaegu ja tuvastada võimalikke kitsaskohti.

Levinud fondilaadimise probleemide tõrkeotsing

Vaatamata teie parimatele pingutustele võite fondide laadimisel kokku puutuda probleemidega. Siin on mõned levinud probleemid ja nende lahendused:

• Fonti ei kuvata:
  • Kontrollige fondi teid: Veenduge, et teie src-omaduse URL-id on õiged ja et fondifailid asuvad määratud asukohtades.
  • Brauseri vahemälu: Tühjendage oma brauseri vahemälu, et veenduda, et te ei vaata CSS-i või fondifailide vananenud versiooni.
  • CORS-i probleemid: Kui font asub teisel domeenil, veenduge, et server on konfigureeritud lubama päritoluüleseid päringuid (CORS).
  • Valed MIME-tüübid: Veenduge, et teie server pakub teie fondifailide jaoks õigeid MIME-tüüpe (nt font/woff2 WOFF2 jaoks, font/woff WOFF-i jaoks).
  • CSS-i spetsiifilisus: Veenduge, et teie CSS-reeglid on piisavalt spetsiifilised, et tühistada kõik vastuolulised stiilid, mis võivad takistada fondi rakendamist.
• FOUT (stiilita teksti välkumine):
  • Kasutage font-display-omadust fondi renderdamiskäitumise kontrollimiseks. Katsetage erinevate väärtustega (nt swap, fallback), et leida parim tasakaal esialgse renderdamiskiiruse ja visuaalse järjepidevuse vahel.
  • Eellaadige kriitilisi fonte, et vähendada nende laadimiseks kuluvat aega.
• Fondi renderdamise probleemid (nt moonutatud märgid, vale vahekaugus):
  • Kontrollige fondi terviklikkust: Veenduge, et fondifailid ei oleks rikutud. Laadige allikast uus koopia.
  • Brauseri ühilduvus: Mõnedel fontidel võib teatud brauserites olla renderdamisprobleeme. Testige oma veebisaiti erinevates brauserites ja versioonides.
  • CSS-i konfliktid: Otsige CSS-i omadusi, mis võivad fondi renderdamist häirida (nt text-rendering, letter-spacing).

Kokkuvõte

CSS-i @font-face'i valdamine on hädavajalik visuaalselt atraktiivsete ja suure jõudlusega veebisaitide loomiseks, mis on suunatud globaalsele publikule. Mõistes täiustatud tehnikaid nagu font-display, Font Loading API, muutuvad fondid, alamosadeks jaotamine ja eellaadimine, saate optimeerida fondide laadimist, parandada kasutajakogemust ja tagada brauseriülese ühilduvuse. Ärge unustage seada esikohale ligipääsetavust ja pidevalt jälgida fondide laadimise jõudlust, et tuvastada ja lahendada võimalikke probleeme. Järgides selles juhendis kirjeldatud parimaid tavasid, saate oma veebidisaini oskusi täiustada ja luua veebisaite, mis on nii ilusad kui ka ligipääsetavad kasutajatele üle kogu maailma. Maailm on üha enam omavahel seotud ning tähelepanu detailidele sellistes valdkondades nagu fondide laadimine mõjutab oluliselt mitmekesise, globaalse kasutajaskonna kasutajakogemust.