CSS @font-face: Individualių šriftų įkėlimo įvaldymas kuriant globalias interneto patirtis

Dinamiškame interneto dizaino pasaulyje tipografija atlieka esminį vaidmenį formuojant vartotojo patirtį ir prekės ženklo identitetą. Individualūs šriftai, nors ir suteikia didžiulę kūrybinę laisvę, taip pat sukelia sunkumų, ypač susijusių su įkėlimu ir našumu. CSS @font-face taisyklė yra pagrindinis individualios tipografijos integravimo į jūsų svetaines elementas, suteikiantis smulkmenišką kontrolę, kaip šie šriftai yra gaunami ir pritaikomi. Šis išsamus vadovas gilinasi į @font-face subtilybes, suteikdamas jums galimybę kurti vizualiai stulbinančias, našias ir visuotinai prieinamas interneto patirtis.

@font-face galios supratimas

Prieš atsirandant @font-face, interneto dizaineriai buvo didžiąja dalimi apriboti nedideliu sistemos šriftų rinkiniu, o tai dažnai lemdavo interneto estetikos suvienodėjimą. @font-face tai pakeitė iš esmės, leisdama kūrėjams nurodyti individualius šriftus, kuriuos vartotojo naršyklė atsisiųs ir atvaizduos. Tai leidžia svetainėms turėti unikalų tipografinį balsą, kuris yra labai svarbus prekės ženklo išskirtinumui ir specifinių nuotaikų ar pranešimų perdavimui.

Pagrindinė @font-face sintaksė yra elegantiškai paprasta:

            @font-face {
  font-family: 'YourFontName';
  src: url('path/to/your-font.woff2') format('woff2'),
       url('path/to/your-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
            

              
                Copy
              
            
          

Panagrinėkime šias esmines savybes:

• font-family: Tai yra pavadinimas, kurį naudosite savo individualiam šriftui nurodyti CSS stilių faile. Galite pasirinkti bet kokį pavadinimą, tačiau gera praktika yra jį padaryti aprašomąjį.
• src: Ši savybė yra @font-face esmė. Ji nurodo šrifto failų vietą. Galite pateikti kelis URL, kurių kiekvienas nurodo skirtingą šrifto formatą. Naršyklė bandys atsisiųsti pirmąjį palaikomą formatą.
• url(): Nurodo kelią iki šrifto failo. Tai gali būti santykinis arba absoliutus URL.
• format(): Šis svarbus aprašas padeda naršyklei identifikuoti šrifto formatą, leidžiant jai praleisti nepalaikomų formatų atsisiuntimą. Dažniausi formatai yra woff2, woff, truetype (.ttf), opentype (.otf) ir embedded-opentype (.eot senesnėms Internet Explorer versijoms).
• font-weight: Apibrėžia šrifto storį (pvz., normal, bold, 100-900). Paprastai skirtingiems tos pačios šriftų šeimos storiams apibrėšite atskiras @font-face taisykles.
• font-style: Nurodo šrifto stilių (pvz., normal, italic, oblique). Panašiai kaip ir su storiu, skirtingiems stiliams dažniausiai reikalingos atskiros @font-face deklaracijos.

Šriftų įkėlimo optimizavimas globaliai auditorijai

Globaliai auditorijai šrifto įkėlimo našumas yra svarbiausias. Vartotojai, lankantys jūsų svetainę iš skirtingų geografinių vietovių, gali turėti skirtingą interneto greitį ir pralaidumo apribojimus. Neefektyvus šriftų įkėlimas gali lemti lėtą puslapio atvaizdavimą, prastą vartotojo patirtį ir galbūt prarastus lankytojus. Svarbiausia yra efektyviai pateikti tinkamus šriftų formatus.

Šriftų formatų ir naršyklių palaikymo supratimas

Šiuolaikinės naršyklės puikiai palaiko .woff2 ir .woff formatus. Šie formatai yra labai suspausti ir efektyvūs, todėl jie yra pageidaujamas pasirinkimas interneto tipografijai.

• WOFF2 (Web Open Font Format 2): Tai moderniausias ir efektyviausias formatas, siūlantis geresnį suspaudimą (iki 45% geresnį nei WOFF) dėl Brotli suspaudimo algoritmo naudojimo. Jį palaiko visos šiuolaikinės naršyklės, įskaitant Chrome, Firefox, Safari ir Edge.
• WOFF (Web Open Font Format): WOFF2 pirmtakas, WOFF suteikia gerą suspaudimą ir yra plačiai palaikomas įvairiose naršyklėse. Tai patikimas atsarginis variantas, jei WOFF2 neprieinamas.
• TrueType Font (TTF) / OpenType Font (OTF): Tai tradiciniai darbalaukio šriftų formatai, kurie gali būti naudojami internete. Tačiau jie paprastai yra mažiau optimizuoti interneto perdavimui nei WOFF/WOFF2, turėdami didesnius failų dydžius.
• Embedded OpenType (EOT): Šis formatas daugiausia buvo naudojamas Internet Explorer versijoms iki IE9. Dabar jis iš esmės pasenęs, tačiau gali būti įtrauktas dėl išskirtinio atgalinio suderinamumo, nors šiuolaikinėje kūryboje jis dažnai praleidžiamas.
• SVG šriftai: Senesnės Safari versijos palaikė SVG šriftus. Kaip ir EOT, jie šiandien retai naudojami.

Patikima @font-face deklaracija dažnai apima formatų kaskadą, teikiant pirmenybę efektyviausiems:

            @font-face {
  font-family: 'MyAwesomeFont';
  src: url('/fonts/MyAwesomeFont.woff2') format('woff2'),
       url('/fonts/MyAwesomeFont.woff') format('woff');
}
            

              
                Copy
              
            
          

Ši sąranka užtikrina, kad naršyklės pirmiausia bandys atsisiųsti MyAwesomeFont.woff2. Jei jos nepalaiko WOFF2, jos grįš prie MyAwesomeFont.woff atsisiuntimo.

Fragmentavimo (subsetting) naudojimas našumui

Vienas šrifto failas, ypač turintis daug storių ir stilių, gali būti gana didelis. Svetainėms, skirtoms globaliai auditorijai, jums gali prireikti tik simbolių poaibio. Pavyzdžiui, jei jūsų svetainė daugiausia aptarnauja vartotojus angliškai kalbančiose šalyse, jums gali neprireikti plataus kirilicos ar kinų rašmenų palaikymo, kurie gali ženkliai padidinti šrifto failo dydį.

Šrifto fragmentavimas (subsetting) yra procesas, kurio metu sukuriamas mažesnis šrifto failas, kuriame yra tik tie simboliai (glifai) ir funkcijos, kurių reikia jūsų konkrečiam naudojimo atvejui. Daugelis šriftų kūrėjų ir internetinių įrankių siūlo šrifto fragmentavimo galimybes. Pavyzdžiui, jei jums reikia tik pagrindinių lotyniškų rašmenų ir kelių specifinių simbolių prancūziškai svetainei, galite sukurti fragmentuotą WOFF2 failą, kuriame yra tik tie glifai.

Įsivaizduokite scenarijų, kai naujienų svetainei reikia rodyti antraštes paryškintu, stilizuotu šriftu, o pagrindinį tekstą – labai skaitomu, standartiniu šriftu. Fragmentuojant stilizuotą šriftą taip, kad jame būtų tik būtini simboliai antraštėms, atsisiuntimo dydis drastiškai sumažėja. Apibrėždami savo @font-face taisyklę, jūs tiesiog nurodytumėte fragmentuotą šrifto failą:

            @font-face {
  font-family: 'HeadlineFont';
  src: url('/fonts/HeadlineFont-subset.woff2') format('woff2');
  font-weight: 700;
}
            

              
                Copy
              
            
          

Praktinė įžvalga: Nustatykite, kokių simbolių rinkinių jums tikrai reikia. Jei jūsų tikslinė auditorija naudoja specifines kalbas su unikaliais simboliais (pvz., graikų, arabų, Rytų Azijos raštus), įsitikinkite, kad jūsų šriftų failai juos palaiko. Priešingai, jei esate tikri, kad jūsų auditorija daugiausia naudoja lotyniškus rašmenis, išnagrinėkite fragmentavimo galimybę, kad sumažintumėte failų dydžius.

Šrifto atvaizdavimo strategijos: Vartotojo patirties valdymas

Kai kraunami individualūs šriftai, yra laikotarpis, kai tekstas jūsų puslapyje gali būti dar nestilizuotas. Tai gali sukelti mirgėjimo efektą (Nematomo teksto blyksnis - FOIT) arba netvarkingą išvaizdą (Nestilizuoto teksto blyksnis - FOUT). CSS savybė font-display suteikia esminę šio elgesio kontrolę, ženkliai paveikdama vartotojo patirtį.

Savybė font-display priima kelias reikšmes:

• auto: Numatytasis naršyklės elgesys. Jis gali skirtis, bet paprastai naudojamas sistemos šriftas, o kai individualus šriftas įkeliamas, jis pakeičiamas.
• block: Naršyklė sukuria trumpą blokavimo periodą (paprastai 3 sekundes), per kurį šriftas yra nematomas. Jei per tą laiką šriftas neįkeliamas, naršyklė rodo atsarginį tekstą. Kai šriftas įkeliamas, jis pakeičiamas. Tai gali sukelti FOIT.
• swap: Naršyklė nedelsdama rodo atsarginį tekstą (naudodama sistemos šriftą), o kai individualus šriftas įkeliamas, jį pakeičia. Tai dažnai yra pageidaujamas variantas dėl geresnės vartotojo patirties, nes užtikrina, kad tekstas būtų matomas iš karto.
• fallback: Hibridinis požiūris. Naršyklė nedelsdama rodo atsarginį tekstą ir sukuria labai trumpą nematomumo periodą (pvz., 100ms) individualiam šriftui. Jei individualus šriftas įkeliamas per šį trumpą laikotarpį, jis rodomas; kitaip, naršyklė visą sesiją naudoja atsarginį šriftą.
• optional: Panašus į fallback, bet naršyklė siunčia tinklo užklausą šriftui ir naudoja jį tik tada, jei jis įkeliamas labai greitai (per pradinį trumpą nematomumo periodą). Jei šis langas praleidžiamas, naršyklė visą puslapio sesiją naudos atsarginį šriftą, faktiškai atidėdama individualaus šrifto naudojimą galimam vėlesniam panaudojimui. Tai idealu nekritiniams šriftams, kur našumas yra svarbiausias.

Globaliai auditorijai, kur ryšio greitis gali labai skirtis, swap arba fallback dažnai yra patogiausi vartotojui variantai. Jie užtikrina, kad vartotojai matytų turinį nedelsdami, taip išvengiant nusivylimo.

Norėdami įdiegti font-display, pridėkite jį prie savo @font-face taisyklės:

            @font-face {
  font-family: 'GlobalSans';
  src: url('/fonts/GlobalSans.woff2') format('woff2');
  font-display: swap;
}
            

              
                Copy
              
            
          

Pavyzdys: Įsivaizduokite bankininkystės programos svetainę. Vartotojams regionuose su nepatikimu internetu, FOIT, sukeltas didelio šrifto failo, gali reikšti, kad jie kelias sekundes nematys prisijungimo mygtuko. Naudojant font-display: swap; užtikrinama, kad prisijungimo forma būtų iš karto matoma su sistemos šriftu, o individualus prekės ženklo šriftas įkeliamas vėliau, išlaikant naudojamumą.

Išankstinis šriftų įkėlimas našumui pagerinti

Norėdami dar labiau optimizuoti įkėlimo procesą, galite naudoti <link rel="preload"> žymes savo HTML dokumento <head> dalyje. Tai nurodo naršyklei gauti šriftų failus anksti puslapio įkėlimo procese, dar prieš jai aptinkant CSS, kuris juos naudoja.

Svarbu iš anksto įkelti tik tuos šriftus, kurie yra būtini pradiniam matomam laukui arba kritiniam turiniui. Pernelyg didelis išankstinis įkėlimas gali neigiamai paveikti našumą, sunaudodamas pralaidumą, reikalingą kitiems resursams.

Pridėkite šias eilutes į savo HTML <head> sekciją:

            <link rel="preload" href="/fonts/MyAwesomeFont.woff2" as="font" type="font/woff2" crossorigin></link>
<link rel="preload" href="/fonts/MyAwesomeFont.woff" as="font" type="font/woff" crossorigin></link>
            

              
                Copy
              
            
          

Pagrindiniai atributai:

• href: Kelias iki jūsų šrifto failo.
• as="font": Nurodo naršyklei, kad tai yra šrifto resursas.
• type="font/woff2": Nurodo MIME tipą, padedant naršyklei nustatyti prioritetus.
• crossorigin: Būtinas CORS (Cross-Origin Resource Sharing), jei jūsų šriftai talpinami kitame domene ar CDN. Jis turėtų būti nustatytas į anonymous arba praleistas, jei šriftas yra tame pačiame šaltinyje.

Geriausia praktika: Derinkite @font-face su font-display: swap; ir strateginiu išankstiniu įkėlimu, kad pasiektumėte geriausią greičio ir vizualinės patirties balansą. Iš anksto įkelkite svarbiausią šrifto variantą (pvz., pagrindinio šrifto įprastą storį) naudodami <link rel="preload"> ir naudokite font-display: swap; kitiems variantams arba kaip atsarginį sprendimą.

Pažangios @font-face technikos ir aspektai

Be pagrindų, yra keletas pažangių technikų ir aspektų, kurie gali dar labiau patobulinti jūsų individualių šriftų įgyvendinimą.

Šriftų variacijos ir kintamieji šriftai

Kintamieji šriftai yra revoliucinis pasiekimas tipografijoje. Užuot siuntus kelis failus kiekvienam storiui ir stiliui (pvz., Regular, Bold, Italic), vienas kintamojo šrifto failas gali apimti platų dizaino variacijų spektrą. Tai žymiai sumažina failo dydį ir suteikia sklandžią tipografinių savybių kontrolę.

Su kintamaisiais šriftais galite animuoti šrifto storius, dinamiškai koreguoti optinį dydį arba tiksliai derinti tarpus tarp raidžių. Kintamojo šrifto @font-face deklaracija atrodo panašiai, tačiau dažnai nurodysite font-weight ir font-style diapazoną arba naudosite specifines ašis, kurias palaiko šriftas.

Pavyzdys naudojant kintamąjį šriftą (darant prielaidą, kad šriftas palaiko svorio ir pasvirimo ašis):

            @font-face {
  font-family: 'VariableFont';
  src: url('/fonts/VariableFont.woff2') format('woff2');
  font-weight: 100 900; /* Defines the range of weights */
  font-style: italic 0 italic 1; /* Defines italic range if applicable */
}

/* Applying different weights */
h1 {
  font-family: 'VariableFont';
  font-weight: 700;
}

p {
  font-family: 'VariableFont';
  font-weight: 450;
}

.italic-text {
  font-family: 'VariableFont';
  font-style: italic;
  font-weight: 500;
}
            

              
                Copy
              
            
          

Globalus aktualumas: Kintamieji šriftai yra neįtikėtinai efektyvūs, todėl jie idealiai tinka tarptautinei auditorijai, kur pralaidumas gali būti apribotas. Jie taip pat suteikia didesnį lankstumą adaptyviam dizainui, leidžiant tiksliai derinti tipografiją įvairių dydžių ekranuose ir įrenginiuose, paplitusiuose skirtinguose regionuose.

Sklandus atsarginių šriftų tvarkymas

Nepaisant visų pastangų, šrifto įkėlimas gali nepavykti. Įdiegti patikimą atsarginių variantų strategiją yra labai svarbu norint išlaikyti skaitomumą ir nuoseklią išvaizdą net ir nepalankiomis sąlygomis.

Jūsų CSS turėtų apibrėžti aiškią šriftų hierarchiją. Pradėkite nuo savo individualaus šrifto, po kurio eina bendrinė šriftų šeima, artimai atitinkanti jo savybes.

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

h1 {
  font-family: 'MyHeadlineFont', Georgia, Times, 'Times New Roman', serif;
}

            

              
                Copy
              
            
          

Aspektai globaliems atsarginiams variantams:

• Kalbai specifiniai atsarginiai variantai: Svetainėms, turinčioms tikrai globalią auditoriją, apsvarstykite, kad skirtingi regionai gali turėti pageidaujamus sistemos šriftus. Nors bendriniai atsarginiai variantai, tokie kaip Arial ir Times New Roman, yra plačiai prieinami, kai kuriais atvejais galite norėti įtraukti atsarginius variantus, kurie, kaip žinoma, yra įvairesnėse operacinėse sistemose ar mobiliuosiuose įrenginiuose, paplitusiuose konkrečiuose regionuose. Tačiau dėl paprastumo ir plataus suderinamumo dažniausiai praktiškiausia laikytis visuotinai pripažintų bendrinių šeimų.
• Simbolių rinkiniai: Įsitikinkite, kad jūsų atsarginiai šriftai palaiko simbolių rinkinius, reikalingus jūsų turiniui. Jei jūsų pagrindinis šriftas skirtas daugiakalbei svetainei, jūsų atsarginis šriftas taip pat turėtų idealiu atveju siūlyti platų simbolių palaikymą.

Vietinių šriftų naudojimas (atsargiai)

@font-face leidžia nurodyti vietinio šrifto pavadinimą `src` savybėje. Jei šriftas jau įdiegtas vartotojo sistemoje, naršyklė gali jį naudoti vietoj atsisiunčiamo interneto šrifto, taip taupant pralaidumą.

            @font-face {
  font-family: 'MySystemFont';
  src: local('MySystemFontRegular'), /* Name as installed */
       local('MySystemFont-Regular'),
       url('/fonts/MySystemFont.woff2') format('woff2');
}

            

              
                Copy
              
            
          

Įspėjimai:

• Nenuoseklūs pavadinimai: Vietinių šriftų pavadinimai gali labai skirtis įvairiose operacinėse sistemose ir net skirtingose instaliacijose. Tai apsunkina patikimą aptikimą.
• Šriftų skirtumai: Net jei lokaliai įdiegtas to paties pavadinimo šriftas, tai gali būti kitokia versija arba turėti šiek tiek skirtingas metrikas nei interneto šriftas, o tai gali sukelti maketo poslinkius.
• Ribota nauda: Su šiuolaikine interneto šriftų optimizacija (WOFF2, fragmentavimas, išankstinis įkėlimas), nauda, gaunama pasikliaujant vietiniais šriftais, dažnai yra minimali ir gali sukelti daugiau problemų, nei išspręsti.

Rekomendacija: Nors galite įtraukti vietinių šriftų deklaracijas kaip pradinį žingsnį savo `src` sąraše, teikite pirmenybę interneto šriftų versijoms, kad pasiektumėte nuspėjamus rezultatus visai savo globaliai auditorijai.

Šriftų įkėlimo API: Smulkesnė kontrolė

Dar smulkesnei kontrolei CSS šriftų įkėlimo API siūlo JavaScript pagrįstus sprendimus. Tai leidžia dinamiškai įkelti šriftus, tikrinti jų įkėlimo būseną ir taikyti juos pagal realaus laiko įvykius.

Naudodami JavaScript, galite:

• Įkelti šriftus pagal poreikį.
• Reaguoti į šrifto įkėlimo eigą.
• Taikyti specifinius stilius tik po to, kai šriftai yra įkelti.

Pavyzdys naudojant FontFace ir document.fonts:

            const fontFace = new FontFace('MyDynamicFont', 'url(/fonts/MyDynamicFont.woff2)', {
  style: 'normal',
  weight: 'normal'
});

document.fonts.add(fontFace);

fontFace.load().then(function() {
  // Font loaded successfully, now apply it or update UI
  document.body.style.fontFamily = 'MyDynamicFont, sans-serif';
}).catch(function(error) {
  // Handle font loading errors
  console.error('Font loading failed:', error);
});
            

              
                Copy
              
            
          

Globalus naudojimo atvejis: Tai galingas įrankis adaptyvioms vartotojo sąsajoms. Įsivaizduokite kelionių užsakymo platformą. Jei vartotojas naršo kelionių kryptis Japonijoje, galite dinamiškai įkelti japoniškų rašmenų palaikymą savo šriftui tik tada, kai to reikia, užuot siuntę milžinišką šrifto failą visiems vartotojams visame pasaulyje.

Šriftų valdymo paslaugos ir CDN

Daugeliui šriftų failų valdymas ir optimalaus pristatymo užtikrinimas gali būti sudėtingas. Interneto šriftų paslaugos ir turinio pristatymo tinklai (CDN) siūlo patogų ir dažnai labai optimizuotą sprendimą.

• Google Fonts: Viena populiariausių nemokamų paslaugų, siūlanti didžiulę atvirojo kodo šriftų biblioteką. Paprastai juos įterpiate naudodami paprastą nuorodos žymę. Google Fonts automatiškai pateikia efektyviausius formatus (pvz., WOFF2) ir pagal numatytuosius nustatymus įtraukia font-display: swap;.
• Adobe Fonts (Typekit): Prenumerata pagrįsta paslauga, teikianti aukštos kokybės komercinius šriftus. Ji siūlo patikimą integraciją ir našumo optimizavimą.
• Savarankiškas talpinimas su CDN: Galite talpinti savo šriftų failus CDN tinkle. Tai suteikia jums visišką kontrolę pār failų formatus, fragmentavimą ir pristatymą. CDN yra paskirstyti visame pasaulyje, užtikrinant greitą pristatymą vartotojams, nepriklausomai nuo jų buvimo vietos.

Pavyzdys: Globalus e. prekybos prekės ženklas gali naudoti Google Fonts savo rinkodaros puslapiams, kad užtikrintų vizualinį nuoseklumą ir prekės ženklo atpažįstamumą. Transakcinei savo svetainės daliai (atsiskaitymo procesui) jie gali savarankiškai talpinti labai optimizuotą, fragmentuotą šriftą savo CDN tinkle, siekdami maksimalaus greičio ir patikimumo.

Prieinamumo ir įtraukties užtikrinimas

Tipografija yra pagrindinis interneto prieinamumo komponentas. Globaliai auditorijai tai reiškia, kad reikia užtikrinti, jog jūsų individualūs šriftai būtų skaitomi ir naudojami visiems.

• Įskaitomumas: Rinkitės šriftus, kurie yra aiškūs ir lengvai skaitomi, ypač mažesnių dydžių. Venkite pernelyg dekoratyvių ar suspaustų šriftų pagrindiniam tekstui.
• Kontrastas: Užtikrinkite pakankamą kontrastą tarp šrifto spalvos ir fono spalvos. Tai labai svarbu vartotojams su regos sutrikimais.
• Simbolių palaikymas: Kaip minėta, patikrinkite, ar jūsų pasirinkti šriftai ir jų atsarginiai variantai palaiko kalbas ir raštus, kuriuos naudoja jūsų vartotojai. Trūkstami simboliai gali būti atvaizduojami kaip nenaudingi kvadratėliai (tofu).
• Testavimas: Išbandykite savo tipografiją įvairiose naršyklėse, įrenginiuose ir operacinėse sistemose. Tai, kas gerai atrodo jūsų kūrimo mašinoje, kitur gali būti atvaizduojama skirtingai.

Globalus prieinamumo aspektas: Pasaulio sveikatos organizacijos tyrimas rodo, kad daugiau nei 285 milijonai žmonių visame pasaulyje gyvena su regos sutrikimais. Pirmenybės teikimas aiškiai, įskaitomai tipografijai su puikiais atsarginių variantų mechanizmais yra ne tik dizaino sprendimas; tai įsipareigojimas įtraukčiai.

Išvada: Globalios tipografinės kompetencijos kūrimas

Taisyklė @font-face yra galingas įrankis, kuris, apgalvotai naudojamas, gali pagerinti jūsų svetainės dizainą ir vartotojo patirtį globaliai auditorijai. Suprasdami šriftų formatus, įvaldydami įkėlimo strategijas, tokias kaip font-display ir išankstinis įkėlimas, bei atsižvelgdami į pažangias technikas, tokias kaip kintamieji šriftai ir fragmentavimas, galite pateikti gražią, našią ir prieinamą tipografiją visame pasaulyje.

Nepamirškite, kad tikslas yra suteikti sklandžią patirtį, nepriklausomai nuo vartotojo buvimo vietos ar ryšio greičio. Teikite pirmenybę efektyvumui, įdiekite patikimus atsarginius variantus ir visada kruopščiai išbandykite savo įgyvendinimą. Su šiame vadove aprašytomis technikomis, esate gerai pasirengę išnaudoti visą individualių šriftų potencialą ir kurti tikrai tarptautines interneto patirtis.