Bruke OpenType-funksjoner

OpenType-funksjonene er som hemmelige rom i skriftene. Lås dem opp for å finne metoder for å få skriftene til å se og oppføre seg annerledes på subtile og dramatiske måter. Ikke alle OpenType-funksjoner egner seg for bruk i alle sammenhenger, men noen funksjoner er avgjørende for god typografi.

Hvis du vil bruke OpenType-funksjoner på en skrift i prosjektet ditt, må du inkludere dem i webprosjektet og deretter gi teksten riktig stil med riktig CSS. Se syntaksveiledningen for eksempler på hver funksjon med koder som kan kopieres og limes inn i CSS.

Hvis du vil inkludere OpenType-funksjoner for en skrift i et nettprosjekt, kan du gå til Webprosjekter-siden og klikke på "rediger"-koblingen til prosjektet. Merk av for OpenType-funksjoner i avsnittet Tegnsett. 

Når du har merket av i boksen, vises det også en liste over funksjonene som er tilgjengelige for den bestemte webskriftfamilien, for eksempel ligaturer, alternative tegn eller små blokkbokstaver. 

Listen viser OpenType-funksjoner som er tilgjengelige i alle tykkelser og stiler i familien. Hvis en funksjon kun er inkludert for bestemte tykkelser eller stiler, er den ikke inkludert i listen.

Sjekk nettleserstøtten for funksjonene du bruker

Dårlig nettleserstøtte for skriftvarianter og innstillinger for skriftfunksjoner betyr at OpenType-funksjoner kanskje ikke fungerer som de skal i alle sammenhenger som er viktige for deg.

Støtten er forbløffende nyansert. Nyere nettlesere som hevder at støtten kommer med forbehold, og eldre nettlesere som ikke støtter OpenType-funksjoner, kan gå i stå på grunn av dem. Som standard aktiverer ikke Chrome funksjoner som skal være aktivert som standard (for eksempel vanlige ligaturer og kontekstuelle alternativer). Safari på macOS og iOS ignorerer alle angitte verdier for skriftfunksjonsinnstillinger, og velger i stedet å aktivere noen funksjoner som standard – og standardvalgene kan ikke endres. Noen versjoner av Firefox (versjon 15 og tidligere) får problemer når flere stilistiske sett er aktivert. Bruk av OpenType-funksjoner i Chrome 32 og eldre forhindrer webskrifter fra å fungere.

Gjeldende nettleserstøtte er sterkt avhengig av leverandørprefikser. I hjelpedokumentet Syntakser for OpenType-funksjoner i CSS finner du koder fulle av egenskaper med leverandørprefikser som likner på eksemplet ovenfor.

Design teksten din med OpenType-funksjoner ved hjelp av CSS

CSS-syntakser for å aktivere OpenType-funksjoner er fortsatt under utvikling. Det du trenger å vite, er at det er snakk om egenskaper både på høyt og lavt nivå – og at arv er spesielt vanskelig.

Egenskapen innstillinger for CSS-skriftfunksjoner på lavt nivå støttes delvis i nettlesere via leverandørprefikser, men dette er tungvint å bruke av to årsaker. For det første er den avhengig av OpenType-funksjonstagger på fire tegn som er vanskelige å huske. For det andre er alle funksjonstaggene spesifisert i én enkelt egenskap, noe som kan bli tungvint. Se syntakser for bestemte OpenType-funksjoner og syntakser for bruk av flere OpenType-funksjoner.

Egenskapen CSS-skriftvariant på høyt nivå og underegenskapene er fine fordi de bruker naturlige språkverdier som "small-caps" og "diagonal-fractions". W3C ønsker at vi bruker disse når det er mulig, men nettleserstøtten er ikke-eksisterende. Likevel er det lurt å venne seg til syntaksen.

Derfor bruker vi både font-variant og font-feature-settings, men husker på hvordan de er utformet for å fungere. Vi angir den lettleste skriftvarianten i CSS-en først, slik som i koden ovenfor.

Arv

Innstillingen skriftfunksjoner er en egenskap på lavt nivå beregnet "for spesialtilfeller der bruken er den eneste måten å få tilgang til en bestemt, lite brukt skriftfunksjon", derfor overstyrer den skriftvarianten uavhengig av kilderekkefølgen. Men vær forsiktig – den overstyrer også seg selv:

Eventuelle nedarvede innstillingsverdier for skriftfunksjoner overstyres når egenskapen tas i bruk på nytt. For at elementene med en klasse av en klasse skal ha både small caps (smcp) og oldstyle figures (onum) aktivert i eksempelet ovenfor, må "onum"-verdien inkluderes igjen – derfor må vi skrive om teksten slik:

Indekserte verdier for skriftfunksjonsinnstillinger

Noen verdier for skriftfunksjonsinnstillinger er litt mer komplekse. I eksemplene så langt har hver verdi vært en streng (eller et kommadelt sett av strenger). Tilstedeværelsen eller fraværet av funksjonstagger som "onum" og "smcp" er som et binært valg – funksjonene er enten aktiverte eller deaktiverte.

Dette gir mening. Men hva hvis en skrift inneholder for eksempel to forskjellige swash-versjoner av den store bokstaven "A"? I dette tilfellet ønsker vi ikke bare å aktivere swashes – vi ønsker å aktivere swashes og velge en bestemt swash. Da kan vi legge til en numerisk indeks til verdien, etter strengen:

Du lurer kanskje på hvilket tall du skal bruke her? Hvor mange forskjellige swasher er det i en skrift? Og vel, det avhenger av skriften. Hvis du bruker "0", slår du av swash-funksjonen. Det samme gjelder for andre funksjoner som bruker numeriske indekser, f.eks. stilistiske vekslere og stilistiske sett.

Bruke flere OpenType-funksjoner

Egenskapen skriftvariant er CSS-stenografi for alle underegenskapene for skriftvarianten. Dette kan vi gjøre for å muliggjøre vanlige ligaturer og gammeldagse tegn:

På samme måte kan flere funksjoner aktiveres ved å bruke innstillinger for skriftfunksjoner med en kommadelt liste over verdier:

I begge disse tilfellene overstyres nedarvede verdier fullstendig, og nettleserstøtten kan variere. Husk at verdier for skriftvarianter noen ganger er designet for å aktivere flere funksjoner samtidig (se store bokstaver til små bokstaver).

Ressurser

Hvis du er klar for å begynne å angi stil med CSS, kan du bokmerke syntaksordlisten med vanlige OpenType-funksjoner