Brug af OpenType-funktioner

OpenType-funktioner er som hemmelige rum i skrifttyper. Lås dem op, og du vil finde måder at få skrifttyper til at se ud og opføre sig anderledes på på subtile og dramatiske måder. Det er ikke alle OpenType-funktioner, der er passende at bruge hele tiden, men nogle funktioner er afgørende for god typografi.

For at bruge en skrifttypes OpenType-funktioner i dit projekt skal du inkludere dem i webprojektet og derefter formatere din tekst med den nødvendige CSS. Se vores syntaksvejledning for at få eksempler på hver funktion med kode, som du kan kopiere og indsætte i din CSS.

For at inkludere en skrifttypes OpenType-funktioner i et webprojekt skal du besøge siden for webprojekter og klikke på linket "Rediger" for projektet. Markér afkrydsningsfeltet OpenType-funktioner i sektionen Tegnsæt.

Når feltet er markeret, kan du se en liste over de funktioner, der er tilgængelige for den pågældende webskrifttypefamilie, såsom ligaturer, alternative tegn eller små versaler. 

Listen viser OpenType-funktioner, som er tilgængelige i alle familiens tykkelser og typografier. Hvis en funktion kun er inkluderet i specifikke tykkelser eller typografier, er den ikke inkluderet på listen.

Tjek browserunderstøttelse for de funktioner, du bruger

Dårlig browserunderstøttelse af skrifttypevariant og indstillinger for skrifttypefunktioner betyder, at OpenType-funktioner muligvis ikke fungerer korrekt i alle de sammenhænge, der betyder noget for dig.

Understøttelsen er forbløffende nuanceret. Nyere browserversioner, der hævder understøttelser, tager forbehold, og ældre browsere, der ikke understøtter OpenType-funktioner, kan kvæles i dem. Som standard aktiverer Chrome ikke funktioner, der skal være aktiveret som standard (f.eks. almindelige ligaturer og kontekstuelle alternativer). Safari på masOS og iOS ignorerer alle specificerede indstillingsværdier for skrifttypefunktioner og vælger i stedet at aktivere nogle få funktioner som standard – og dets standardvalg kan ikke ændres. Nogle versioner af Firefox (version 15 og tidligere) har problemer, når flere stilistiske sæt er aktiveret. Anvendelse af OpenType-funktioner i Chrome 32 og tidligere forhindrer webskrifttyper i at virke.

Nuværende browserunderstøttelse er stærkt afhængig af leverandørpræfikser. I hjælpedokumentationen til Syntaks for OpenType-funktioner i CSS vil du se, at koden er fuld af egenskaber med leverandørpræfiks, der ligner eksemplet ovenfor.

Formatér din tekst med OpenType-funktioner ved hjælp af CSS

CSS-syntaks til at aktivere OpenType-funktioner er stadig under udvikling. Det, du skal vide, er, at der er både højniveau- og lavniveauegenskaber – og nedarvning er særligt vanskeligt.

Egenskaben CSS-indstillingerne for skrifttypefunktioner er i nogen grad understøttet i browsere via leverandørpræfikser, men den er besværlig at bruge af to årsager. For det første er den afhængig af OpenType-funktionstags på fire tegn, som er svære at huske. For det andet er alle funktionstags specificeret i en enkelt egenskab, hvilket kan blive kompliceret. Se syntaks for specifikke OpenType-funktioner og syntaks til brug af flere OpenType-funktioner.

CSS-skrifttypevariantegenskaben på højt niveau og dens underegenskaber er fantastiske, fordi de anvender naturlige sprogværdier som "små bogstaver" og "diagonale fraktioner". W3C ønsker, at vi bruger disse, når det er muligt, men browserunderstøttelse er ikke-eksisterende. Alligevel er det en god idé at vænne sig til syntaksen.

Så vi bruger både skrifttype-variant og indstillinger for skrifttypefunktioner, og husk, hvordan de er designet til at fungere. Vi specificerer den letlæselige skrifttypevariant først i vores CSS, ligesom koden ovenfor.

Nedarvning

Fordi indstillinger for skrifttypefunktioner er en egenskab på lavt niveau, der er beregnet til "til specielle tilfælde, hvor dens brug er den eneste måde at få adgang til en bestemt sjældent brugt skrifttypefunktion", vil den tilsidesætte skrifttypevarianten uanset kilderækkefølge. Men vær forsigtig – den tilsidesætter også sig selv:

Eventuelle nedarvede værdier for indstillinger for skrifttypefunktioner tilsidesættes, når egenskaben genanvendes. I eksemplet ovenfor gælder det, at for elementer med en klasse, der skal have både små bogstaver (smcp) og figurer i gammel stil (onum) aktiveret, skal "onum"-værdien inkluderes igen – så vi kunne omskrive erklæringen sådan her:

Indekserede værdier for indstillinger for skrifttypefunktioner

Nogle indstillingsværdier for skrifttypefunktioner er lidt mere komplekse. I eksemplerne hidtil har hver værdi været en streng (eller kommasepareret sæt af strenge). Tilstedeværelsen eller fraværet af funktionstags som "onum" og "smcp" er som et binært valg – funktionerne er enten slået til eller fra.

Det giver mening. Men hvad nu hvis en skrifttype for eksempel indeholder to forskellige versioner med dekorative bogstaver for det store "A"-tegn? I dette tilfælde ønsker vi ikke blot at aktivere dekorative bogstaver – vi ønsker at aktivere dekorative bogstaver og vælge et bestemt dekorativt bogstav. Så vi kan tilføje et numerisk indeks til værdien efter strengen:

Du tænker måske, hvilket nummer skal jeg bruge her? Hvor mange forskellige dekorative bogstaver er der i en skrifttype? Og ja, det afhænger af skrifttypen. At bruge et '0' betyder at slå funktionen til dekorative bogstaver fra. Det samme gælder for andre funktioner, der bruger numeriske indeks, som f.eks. stilistiske alternativer og stilistiske sæt.

Brug af flere OpenType-funktioner

Egenskaben for skrifttypevariant er CSS-stenografi for alle underegenskaber for skrifttypevarianter. Vi kan gøre sådan noget som dette for at muliggøre almindelige ligaturer og figur i gammel stil:

På samme måde kan flere funktioner aktiveres ved hjælp af indstillinger for skrifttypefunktioner med en kommasepareret liste over værdier:

I begge disse tilfælde tilsidesættes nedarvede værdier fuldstændigt, og browserunderstøttelse kan variere. Husk, at skrifttypevariantværdier nogle gange er blevet designet til at aktivere flere funktioner på én gang (se versaler til små bogstaver).

Ressourcer

Hvis du er klar til at begynde at style med CSS, skal du bogmærke vores syntaksordliste med ofte brugte OpenType-funktioner