Tipografinio potencialo atskleidimas: išsamus CSS @font-feature-values vadovas

Interneto dizaino srityje tipografija atlieka esminį vaidmenį formuojant vartotojo patirtį ir perteikiant prekės ženklo identitetą. Nors pagrindinės CSS šrifto savybės, tokios kaip font-family, font-size ir font-weight, suteikia pagrindinę kontrolę, taisyklė @font-feature-values atveria kelią į pažangaus tipografinio pritaikymo pasaulį. Ši taisyklė atskleidžia paslėptą „OpenType“ šriftų potencialą, leidžiantį kūrėjams ir dizaineriams tiksliai suderinti konkrečias šrifto savybes, siekiant pagerinti estetiką, skaitomumą ir prieinamumą. Šis vadovas gilinsis į @font-feature-values subtilybes, nagrinės jos sintaksę, naudojimą ir praktinį taikymą įvairiuose pasauliniuose kontekstuose.

„OpenType“ funkcijų supratimas

Prieš gilinantis į @font-feature-values specifiką, labai svarbu suprasti pagrindinę „OpenType“ funkcijų koncepciją. „OpenType“ yra plačiai paplitęs šrifto formatas, praplečiantis savo pirmtakų, „TrueType“ ir „PostScript“, galimybes. Jame yra gausus funkcijų rinkinys, kuris valdo įvairius glifų atvaizdavimo aspektus, įskaitant:

• Ligatūros: Dviejų ar daugiau simbolių sujungimas į vieną glifą, siekiant pagerinti estetiką ir skaitomumą (pvz., 'fi', 'fl').
• Alternatyvūs glifai: Konkrečių simbolių variantų pateikimas, leidžiantis pasirinkti stilistinius sprendimus ar kontekstinius pakeitimus.
• Stilistiniai rinkiniai: Susijusių stilistinių variacijų grupavimas vienu pavadinimu, leidžiantis dizaineriams lengvai taikyti nuoseklius estetinius sprendimus.
• Skaičių stiliai: Siūlomi skirtingi skaitmenų stiliai, pvz., vienodo aukščio skaitmenys, senovinio stiliaus skaitmenys ir lentelių skaitmenys, kiekvienas tinkamas konkretiems naudojimo atvejams.
• Trupmenos: Automatinis trupmenų formatavimas su atitinkamais skaitiklio, vardiklio ir trupmenos brūkšnio glifais.
• Kapitalinės mažosios raidės: Mažųjų raidžių rodymas kaip mažesnių didžiųjų raidžių versijų.
• Kontekstinės alternatyvos: Glifų formų koregavimas atsižvelgiant į aplinkinius simbolius, gerinant skaitomumą ir vizualinę harmoniją.
• Puikieji brūkšniai (Swashes): Dekoratyviniai papildymai, pridedami prie tam tikrų glifų, suteikiantys elegancijos ir išraiškingumo.
• Kerninimas (Kerning): Tarpų tarp konkrečių simbolių porų koregavimas, siekiant pagerinti vizualinį balansą.

Šios funkcijos paprastai apibrėžiamos pačiame šrifto faile. @font-feature-values suteikia būdą pasiekti ir valdyti šias funkcijas tiesiogiai iš CSS, siūlant neprilygstamą tipografinio dizaino lankstumą.

Pristatome CSS @font-feature-values

Taisyklė @font-feature-values leidžia apibrėžti aprašomuosius pavadinimus konkretiems „OpenType“ funkcijų nustatymams. Tai leidžia naudoti lengviau skaitomus pavadinimus savo CSS kode, todėl kodas tampa lengviau prižiūrimas ir suprantamesnis. Pagrindinė sintaksė yra tokia:

            @font-feature-values <font-family-name> {
  <feature-tag-value> {
    <feature-name>: <feature-value>
  }
}

            

              
                Copy
              
            
          

Išskaidykime kiekvieną komponentą:

• @font-feature-values: Taisyklė, kuri inicijuoja funkcijų verčių apibrėžimą.
• <font-family-name>: Šrifto šeimos pavadinimas, kuriam taikomos šios funkcijų vertės (pvz., 'MyCustomFont', 'Arial'). Tai užtikrina, kad apibrėžtos funkcijų vertės bus taikomos tik elementams, naudojantiems nurodytą šriftą.
• <feature-tag-value>: Blokas, apibrėžiantis konkrečios „OpenType“ funkcijos žymos vertes.
• <feature-tag>: Keturių simbolių žyma, identifikuojanti „OpenType“ funkciją (pvz., liga ligatūroms, smcp kapitalinėms mažosioms raidėms, cswh kontekstiniams puikiesiems brūkšniams). Šios žymos yra standartizuotos ir apibrėžtos „OpenType“ specifikacijoje. Išsamius šių žymų sąrašus galite rasti „OpenType“ dokumentacijoje ir įvairiuose internetiniuose ištekliuose.
• <feature-name>: Aprašomasis pavadinimas, kurį priskiriate konkrečiai „OpenType“ funkcijos vertei. Tai yra pavadinimas, kurį naudosite savo CSS taisyklėse. Pasirinkite prasmingus ir lengvai įsimenamus pavadinimus.
• <feature-value>: Tikroji „OpenType“ funkcijos vertė. Paprastai tai yra on arba off loginėms funkcijoms, arba skaitinė vertė funkcijoms, kurios priima verčių diapazoną.

Praktiniai pavyzdžiai ir naudojimo atvejai

Norėdami iliustruoti @font-feature-values galią, apsvarstykime keletą praktinių pavyzdžių:

1. Pasirenkamųjų ligatūrų įjungimas

Pasirenkamosios ligatūros yra neprivalomos ligatūros, kurios gali pagerinti tam tikrų simbolių derinių estetinį patrauklumą. Norėdami jas įjungti, galite apibrėžti funkcijos vertę taip:

            @font-feature-values "MyCustomFont" {
  @discretionary-ligatures {
    common-ligatures: on;
  }
}

.my-text {
  font-family: "MyCustomFont";
  font-variant-alternates: discretionary-ligatures;
}

            

              
                Copy
              
            
          

Šiame pavyzdyje mes apibrėžėme funkcijos vertę, pavadintą common-ligatures, skirta dlig (pasirenkamosios ligatūros) „OpenType“ funkcijai. Tada šią funkcijos vertę taikome klasei .my-text naudodami savybę font-variant-alternates. Pastaba: senesnėms naršyklėms gali prireikti naudoti savybę font-variant-ligatures. Prieš diegiant, reikėtų patikrinti naršyklių suderinamumą.

2. Stilistinių rinkinių valdymas

Stilistiniai rinkiniai leidžia taikyti stilistinių variacijų rinkinius savo tekstui. Pavyzdžiui, galite norėti naudoti konkretų stilistinį rinkinį antraštėms ar pagrindiniam tekstui.

            @font-feature-values "MySerifFont" {
  @stylistic-sets {
    alternate-a: ss01;
    elegant-numbers: ss02;
  }
}

.heading {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(alternate-a);
}

.body-text {
  font-family: "MySerifFont";
  font-variant-alternates: stylistic(elegant-numbers);
}

            

              
                Copy
              
            
          

Čia mes apibrėžėme du stilistinius rinkinius: alternate-a (susietą su ss01) ir elegant-numbers (susietą su ss02). Tada šiuos rinkinius taikome skirtingiems elementams naudodami font-variant-alternates. Konkrečios stilistinių rinkinių žymos (ss01, ss02 ir t. t.) yra apibrėžtos pačiame šrifte. Dėl galimų stilistinių rinkinių žiūrėkite šrifto dokumentaciją.

3. Skaičių stilių pritaikymas

„OpenType“ šriftai dažnai siūlo skirtingus skaičių stilius įvairiems tikslams. Vienodo aukščio skaitmenys paprastai naudojami lentelėse ir diagramose, o senovinio stiliaus skaitmenys geriau dera su pagrindiniu tekstu.

            @font-feature-values "MyProFont" {
  @styleset {
    tabular-numbers: tnum;
    proportional-oldstyle: pold;
  }
}

.table-data {
  font-family: "MyProFont";
  font-variant-alternates: styleset(tabular-numbers);
}

.body-text {
  font-family: "MyProFont";
  font-variant-alternates: styleset(proportional-oldstyle);
}

            

              
                Copy
              
            
          

Šis pavyzdys apibrėžia tabular-numbers (tnum) lentelių duomenims ir proportional-oldstyle (pold) pagrindiniam tekstui, gerindamas skaitomumą ir vizualinį nuoseklumą.

4. Kelių funkcijų derinimas

Galite sujungti kelias funkcijas vienoje font-variant-alternates deklaracijoje:

            @font-feature-values "MyComplexFont" {
  @styleset {
    historical-forms: hist;
    contextual-alternates: calt;
  }
  @discretionary-ligatures {
   rare-ligatures: dlig;
  }
}

.special-text {
  font-family: "MyComplexFont";
  font-variant-alternates: styleset(historical-forms) discretionary-ligatures(rare-ligatures);
}

            

              
                Copy
              
            
          

Tai leidžia sukurti sudėtingus tipografinius efektus, vienu metu taikant kelias „OpenType“ funkcijas. Atkreipkite dėmesį, kad tvarka kartais gali būti svarbi. Eksperimentavimas yra raktas į norimo rezultato pasiekimą.

font-variant-settings naudojimas tiesioginei prieigai prie funkcijų

Nors @font-feature-values ir font-variant-alternates suteikia aukšto lygio abstrakciją, savybė font-variant-settings siūlo tiesioginę prieigą prie „OpenType“ funkcijų naudojant jų keturių simbolių žymas. Ši savybė ypač naudinga dirbant su funkcijomis, kurių neapima iš anksto apibrėžti font-variant-alternates raktažodžiai, arba kai reikia smulkesnio valdymo.

font-variant-settings sintaksė yra tokia:

            font-variant-settings: "<feature-tag>" <value>, "<feature-tag>" <value>, ...;

            

              
                Copy
              
            
          

Pavyzdžiui, norėdami įjungti kapitalines mažąsias raides, galėtumėte naudoti:

            .small-caps-text {
  font-family: "MyFont";
  font-variant-settings: "smcp" 1;
}

            

              
                Copy
              
            
          

Čia "smcp" 1 tiesiogiai nurodo naršyklei įjungti kapitalinių mažųjų raidžių funkciją. Vertė 1 paprastai reiškia 'įjungta', o 0 reiškia 'išjungta'.

Galite sujungti kelis funkcijų nustatymus vienoje deklaracijoje:

            .advanced-text {
  font-family: "MyFont";
  font-variant-settings: "liga" 0, "cswh" 1, "calt" 1;
}

            

              
                Copy
              
            
          

Tai išjungia standartines ligatūras (liga), įjungia kontekstinius puikiuosius brūkšnius (cswh) ir įjungia kontekstines alternatyvas (calt).

font-variant-settings privalumai:

• Tiesioginis valdymas: Suteikia tikslų individualių „OpenType“ funkcijų valdymą.
• Lankstumas: Leidžia pasiekti funkcijas, kurių neapima font-variant-alternates.

font-variant-settings trūkumai:

• Mažiau skaitomas: Grynų funkcijų žymų naudojimas gali padaryti kodą mažiau skaitomą ir sunkiau suprantamą.
• Sunkiau prižiūrimas: Pakeitus funkcijų žymas šrifte, reikia atnaujinti CSS tiesiogiai.

Geroji praktika: Kai tik įmanoma, naudokite @font-feature-values ir font-variant-alternates, siekdami geresnio skaitomumo ir priežiūros. Palikite font-variant-settings atvejams, kai būtina tiesioginė prieiga prie funkcijų.

Prieinamumo aspektai

Nors @font-feature-values gali žymiai pagerinti tipografijos vizualinį patrauklumą, labai svarbu atsižvelgti į prieinamumo pasekmes. Neteisingai pritaikytos funkcijos gali neigiamai paveikti skaitomumą ir patogumą vartotojams su negalia. Štai keletas svarbių aspektų:

• Ligatūros: Nors ligatūros gali pagerinti estetiką, jos taip pat gali apsunkinti skaitomumą vartotojams, sergantiems disleksija, arba tiems, kurie naudojasi ekrano skaitytuvais. Venkite perteklinio pasirenkamųjų ligatūrų naudojimo, ypač pagrindiniame tekste. Esant reikalui, suteikite galimybę išjungti ligatūras.
• Alternatyvūs glifai: Naudojant pernelyg dekoratyvius ar neįprastus glifus, tekstą gali būti sunku iššifruoti. Užtikrinkite, kad alternatyvūs glifai išlaikytų pakankamą kontrastą ir įskaitomumą.
• Kontekstinės alternatyvos: Nors kontekstinės alternatyvos paprastai gerina skaitomumą, prastai suprojektuotos alternatyvos gali sukelti vizualinių neatitikimų ir sumaišties. Kruopščiai išbandykite kontekstines alternatyvas su skirtingais simbolių deriniais.
• Kontrastas: Užtikrinkite pakankamą kontrastą tarp teksto ir fono, neatsižvelgiant į naudojamas „OpenType“ funkcijas. Naudokite įrankius kontrastų santykiams patikrinti ir atitikti WCAG prieinamumo gaires.
• Testavimas: Išbandykite savo tipografiją su pagalbinėmis technologijomis, tokiomis kaip ekrano skaitytuvai, kad įsitikintumėte, jog tekstas yra tinkamai interpretuojamas ir perduodamas vartotojams su negalia.

Internacionalizacija ir lokalizacija

„OpenType“ funkcijos atlieka lemiamą vaidmenį palaikant įvairias kalbas ir rašto sistemas. Daugelis šriftų apima funkcijas, specialiai sukurtas tam tikroms kalboms ar regionams. Pavyzdžiui:

• Arabų kalba: „OpenType“ šriftai arabų kalbai dažnai apima kontekstinio formavimo funkcijas, kurios koreguoja glifus pagal jų padėtį žodyje.
• Indijos rašmenys: Šriftai Indijos raštams (pvz., devanagari, bengalų, tamilų) apima sudėtingas formavimo taisykles, kad teisingai tvarkytų jungtinius priebalsius ir balsių ženklus.
• CJK (kinų, japonų, korėjiečių): „OpenType“ šriftai CJK kalboms dažnai apima alternatyvių glifų formų ir stilistinių variacijų funkcijas, atsižvelgiant į regioninius pageidavimus.

Kuriant daugiakalbes svetaines, būtina pasirinkti šriftus, kurie tinkamai palaiko tikslines kalbas, ir naudoti „OpenType“ funkcijas, kad užtikrintumėte teisingą atvaizdavimą ir tinkamas stilistines variacijas. Pasikonsultuokite su gimtakalbiais ir tipografijos ekspertais, kad įsitikintumėte, jog jūsų tipografija yra kultūriškai jautri ir lingvistiškai tiksli.

Štai keletas pavyzdžių, iliustruojančių „OpenType“ funkcijų svarbą skirtingose kalbose:

• Arabų kalba: Daugelis arabų šriftų labai priklauso nuo kontekstinių alternatyvų (`calt`), kad tinkamai sujungtų raides pagal jų padėtį žodyje. Išjungus šią funkciją, tekstas gali tapti nesujungtas ir neįskaitomas.
• Hindi (devanagari): `rlig` (būtinosios ligatūros) funkcija yra būtina norint teisingai atvaizduoti jungtinius priebalsius. Be jos, sudėtingi priebalsių telkiniai bus rodomi kaip atskiri simboliai, todėl tekstą bus sunku skaityti.
• Japonų kalba: Japonų tipografijoje dažnai naudojami alternatyvūs simbolių glifai, siekiant suteikti stilistinių variacijų ir patenkinti skirtingus estetinius pageidavimus. `font-variant-alternates` arba `font-variant-settings` gali būti naudojami šiems alternatyviems glifams pasirinkti.

Nepamirškite ištirti konkrečių kiekvienos palaikomos kalbos tipografinių reikalavimų ir atitinkamai pasirinkti šriftus bei funkcijas. Testavimas su gimtakalbiais yra neįkainojamas siekiant užtikrinti tikslią ir kultūriškai tinkamą tipografiją.

Naršyklių suderinamumas

Naršyklių palaikymas @font-feature-values ir susijusioms CSS savybėms laikui bėgant žymiai pagerėjo, tačiau prieš pradedant naudoti šias funkcijas produkcijoje, būtina patikrinti suderinamumą. 2023 m. pabaigoje dauguma šiuolaikinių naršyklių palaiko šias funkcijas, įskaitant:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Tačiau senesnėms naršyklėms gali trūkti palaikymo arba jos gali elgtis nenuosekliai. Naudokite svetainę, tokią kaip "Can I use...", kad patikrintumėte dabartinę suderinamumo būseną, ir apsvarstykite galimybę pateikti atsarginius stilius senesnėms naršyklėms. Galite naudoti funkcijų užklausas (@supports), kad aptiktumėte naršyklės palaikymą ir atitinkamai taikytumėte stilius:

            @supports (font-variant-alternates: discretionary-ligatures) {
  .my-text {
    font-variant-alternates: discretionary-ligatures;
  }
}

            

              
                Copy
              
            
          

Tai užtikrina, kad savybė font-variant-alternates bus taikoma tik tada, jei naršyklė ją palaiko.

Dizaino sistemos ir pakartotinai naudojama tipografija

@font-feature-values galima sklandžiai integruoti į dizaino sistemas, siekiant sukurti pakartotinai naudojamus ir nuoseklius tipografinius stilius. Apibrėždami funkcijų vertes centralizuotai, galite užtikrinti, kad tipografiniai sprendimai būtų nuosekliai taikomi visoje jūsų svetainėje ar programoje. Tai skatina prekės ženklo nuoseklumą ir supaprastina priežiūrą.

Štai pavyzdys, kaip galėtumėte struktūrizuoti savo CSS dizaino sistemoje:

            /* typography.css */

@font-feature-values "MyBrandFont" {
  @stylistic-sets {
    brand-headline: ss01;
    brand-body: ss02;
  }
  @discretionary-ligatures {
    brand-ligatures: on;
  }
}

/* components.css */

.headline {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-headline);
}

.body {
  font-family: "MyBrandFont";
  font-variant-alternates: stylistic(brand-body);
}

.brand-text {
    font-family: "MyBrandFont";
    font-variant-alternates: discretionary-ligatures(brand-ligatures);
}

            

              
                Copy
              
            
          

Šiame pavyzdyje @font-feature-values yra apibrėžtos atskirame typography.css faile, o komponentų stiliai apibrėžti components.css. Toks atsakomybių atskyrimas daro kodą moduliaresnį ir lengviau prižiūrimą.

Naudodami aprašomuosius pavadinimus savo funkcijų vertėms (pvz., brand-headline, brand-body), jūs darote savo kodą labiau save dokumentuojantį ir lengviau suprantamą kitiems kūrėjams. Tai ypač svarbu didelėse komandose, kur prie to paties projekto gali dirbti keli kūrėjai.

Šriftų įkėlimas ir našumas

Naudojant interneto šriftus, labai svarbu optimizuoti šriftų įkėlimą našumui. Dideli šrifto failai gali žymiai paveikti puslapio įkėlimo laiką, sukeldami prastą vartotojo patirtį. Štai keletas patarimų, kaip optimizuoti šriftų įkėlimą:

• Naudokite WOFF2: WOFF2 yra efektyviausias šrifto formatas ir siūlo geriausią suspaudimą. Naudokite jį, kai tik įmanoma.
• Dalinai apkarpykite šriftus (Subset): Jei jums reikia tik dalies šrifto simbolių, apsvarstykite galimybę apkarpyti šriftą, kad sumažintumėte jo failo dydį. Tam gali padėti įrankiai, tokie kaip FontForge ir internetinės šriftų apkarpyimo paslaugos.
• Naudokite font-display: Savybė font-display kontroliuoja, kaip šriftai rodomi, kol jie įkeliami. Naudokite vertes, tokias kaip swap ar optional, kad išvengtumėte teksto atvaizdavimo blokavimo.
• Iš anksto įkelkite šriftus: Naudokite <link rel="preload"> žymą, kad iš anksto įkeltumėte svarbius šriftus, nurodydami naršyklei juos atsisiųsti anksčiau puslapio įkėlimo procese.
• Apsvarstykite šriftų paslaugą: Paslaugos, tokios kaip „Google Fonts“, „Adobe Fonts“ ir „Fontdeck“, gali už jus tvarkyti šriftų talpinimą ir optimizavimą.

Dirbdami su @font-feature-values, atminkite, kad „OpenType“ funkcijų įjungimo poveikis našumui paprastai yra nereikšmingas. Pagrindinis našumo rūpestis yra pats šrifto failo dydis. Sutelkite dėmesį į šriftų įkėlimo optimizavimą ir protingai naudokite „OpenType“ funkcijas, kad pagerintumėte vartotojo patirtį.

Išvada: tipografinės tobulybės siekimas

Taisyklė @font-feature-values ir susijusios CSS savybės suteikia galingą įrankių rinkinį, leidžiantį atskleisti visą „OpenType“ šriftų potencialą. Suprasdami „OpenType“ funkcijas, prieinamumo aspektus, internacionalizacijos reikalavimus ir naršyklių suderinamumą, galite sukurti sudėtingą ir vizualiai patrauklią tipografiją, kuri pagerina vartotojo patirtį ir stiprina jūsų prekės ženklo identitetą. Pasinaudokite @font-feature-values galia ir pakelkite savo interneto dizainą į naujas tipografinės tobulybės aukštumas.

Atidžiai atsižvelgdami į skirtingų kalbų ir kultūrų tipografinius niuansus, galite sukurti svetaines, kurios yra ne tik vizualiai patrauklios, bet ir prieinamos bei įtraukiančios pasaulinei auditorijai. Svarbiausia yra atsižvelgti į galimą „OpenType“ funkcijų poveikį skaitomumui ir patogumui bei kruopščiai išbandyti savo tipografiją su įvairiais vartotojais.