Handboek Annuleren

OpenType-functies gebruiken

OpenType-functies zijn een soort geheime vakjes in lettertypen. Als je ze ontgrendelt, kun je ervoor zorgen dat lettertypen er subtiel of ingrijpend anders uitzien en zich anders gedragen. Niet alle OpenType-functies zijn geschikt om altijd te gebruiken, maar sommige functies zijn van cruciaal belang voor geweldige typografie.

Als je de OpenType-functies van een lettertype in je project wilt gebruiken, moet je ze opnemen in het webproject en vervolgens de tekst opmaken met de vereiste CSS. Raadpleeg onze syntaxisgids voor voorbeelden van elke functie met code die je kunt kopiëren en in je CSS kunt plakken.

OpenType-functies opnemen in je project

Als je de OpenType-functies van een lettertype in een webproject wilt opnemen, ga je naar de pagina Webprojecten en klik je op de koppeling 'Bewerken' voor het project. Schakel in het gedeelte Tekenset het vakje OpenType-functies in.

image

Als dit vakje is ingeschakeld, zie je een lijst met de functies die beschikbaar zijn voor die specifieke weblettertypefamilie, zoals ligaturen, alternatieve tekens of kleinkapitalen. 

De lijst toont OpenType-functies die beschikbaar zijn voor alle dikten en stijlen van de familie. Als een functie alleen beschikbaar is voor specifieke dikten of stijlen, wordt deze niet in de lijst opgenomen.

De browserondersteuning controleren voor de functies die je gebruikt

Als de browser geen goede ondersteuning biedt voor lettertypevariant (font-variant) en instellingen voor lettertypefuncties (font-feature-settings), betekent dit dat OpenType-functies mogelijk niet goed werken in alle contexten die voor jou van belang zijn.

De ondersteuning kijkt zeer nauw. Nieuwere browserversies die ondersteuning claimen, zijn voorzien van voorbehouden, en oudere browsers die geen OpenType-functies ondersteunen, kunnen erop vastlopen. Standaard schakelt Chrome geen functies in die standaard zouden moeten zijn ingeschakeld (zoals gangbare ligaturen en contextuele alternatieven). Safari in macOS en iOS negeert alle opgegeven waarden voor font-feature-settings. In plaats daarvan worden enkele functies standaard ingeschakeld, waarbij de standaardkeuzes niet kunnen worden gewijzigd. Sommige versies van Firefox (versie 15 en eerder) hebben problemen wanneer meerdere stilistische sets zijn ingeschakeld. Als OpenType-functies worden toegepast in Chrome 32 en ouder, werken weblettertypen niet meer.

-moz-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";
-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";
-moz-font-feature-settings: "smcp";
-webkit-font-feature-settings: "smcp";
font-feature-settings: "smcp";

De huidige browserondersteuning is sterk afhankelijk van leveranciersvoorvoegsels. In het Help-document Syntaxis voor OpenType-functies in CSS vind je code die vol zit met door de leverancier vooraf ingestelde eigenschappen die eruitzien als het bovenstaande voorbeeld.

De stijl van je tekst wijzigen met OpenType-functies via CSS

De CSS-syntaxis voor het inschakelen van OpenType-functies is voortdurend in ontwikkeling. Wat je moet weten, is dat er high-level en low-level eigenschappen zijn en dat overerving bijzonder lastig is.

De low-level CSS-eigenschap font-feature-settings wordt deels ondersteund in browsers via leveranciersvoorvoegsels, maar het gebruik hiervan is om twee redenen omslachtig. Ten eerste vertrouwt deze op OpenType-functietags van vier tekens die lastig te onthouden zijn. Ten tweede worden alle functietags opgegeven in één eigenschap, wat ook lastig kan zijn. Raadpleeg de syntaxis voor specifieke OpenType-functies en de syntaxis voor het gebruik van meerdere OpenType-functies.

De high-level CSS-eigenschap font-variant en de bijbehorende subeigenschappen zijn zeer handig omdat ze waarden in natuurlijke taal gebruiken, zoals 'small-caps' en 'diagonal-fractions'. Het W3C wil dat we deze waar mogelijk gebruiken, maar hiervoor is geen browserondersteuning. Toch is het een goed idee om te wennen aan deze syntaxis.

.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
.class { font-variant-caps: small-caps; font-feature-settings: "smcp"; }
.class {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp";
}

Daarom gebruiken we zowel font-variant als font-feature-settings, rekening houdend met de manier waarop ze bedoeld zijn. We specificeren eerst de gemakkelijk leesbare font-variant in onze CSS, zoals in de code hierboven.

Overerving

Omdat font-feature-settings een low-level eigenschap is die is bedoeld 'voor speciale gevallen waarin het gebruik ervan de enige manier is om toegang te krijgen tot een bepaalde, zelden gebruikte lettertypefunctie', zal dit font-variant overschrijven, ongeacht de bronvolgorde. Maar wees voorzichtig, deze eigenschap overschrijft ook zichzelf:

body {
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
}
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp"; /* schakelt onum uit in de body-instructie */
}
body { font-variant-numeric: oldstyle-nums; font-feature-settings: "onum"; } .class { font-variant-caps: small-caps; font-feature-settings: "smcp"; /* schakelt onum uit in de body-instructie */ }
body {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum";
}

.class {
  font-variant-caps: small-caps;
  font-feature-settings: "smcp"; /* schakelt onum uit in de body-instructie */
}

Alle overgeërfde waarden voor font-feature-settings worden overschreven wanneer de eigenschap opnieuw wordt toegepast. In het bovenstaande voorbeeld moet, voor elementen met de klasse class waarvoor zowel kleinkapitalen (smcp) als uithangende cijfers (onum) moeten zijn ingeschakeld, de waarde 'onum' opnieuw worden toegevoegd, zodat we de instructie als volgt kunnen herschrijven:

.class {
font-variant-caps: small-caps;
font-feature-settings: "onum", "smcp";
}
.class { font-variant-caps: small-caps; font-feature-settings: "onum", "smcp"; }
.class {
  font-variant-caps: small-caps;
  font-feature-settings: "onum", "smcp";
}

Geïndexeerde waarden voor font-feature-settings

Sommige waarden voor font-feature-settings zijn iets complexer. In de voorbeelden tot nu toe was elke waarde een tekenreeks (of een door komma's gescheiden reeks tekenreeksen). De aan- of afwezigheid van functietags zoals 'onum' en 'smcp' is als een binaire keuze: de functies zijn in- of uitgeschakeld.

Dat is logisch. Maar stel nu dat een lettertype twee verschillende sierletterversies (swash) van de hoofdletter 'A' heeft? In dit geval willen we niet alleen sierletters inschakelen, we willen sierletters inschakelen en een bepaald type sierletter kiezen. We kunnen dus een numerieke index toevoegen aan de waarde, na de tekenreeks:

font-feature-settings: "swsh" 2;
font-feature-settings: "swsh" 2;
font-feature-settings: "swsh" 2;

Je vraagt je wellicht af welk nummer je hier moet gebruiken. En hoeveel verschillende sierletters er in een lettertype zitten. Dat hangt af van het lettertype. Als je een '0' gebruikt, betekent dit dat de functie swash is uitgeschakeld. Hetzelfde geldt voor andere functies die numerieke indexen gebruiken, zoals stilistische alternatieven en stilistische sets.

Meerdere OpenType-functies gebruiken

De eigenschap font-variant is een CSS-afkorting voor alle subeigenschappen van font-variant. We kunnen bijvoorbeeld het volgende gebruiken om gangbare ligaturen (common-ligatures) en uithangende cijfers (oldstyle-nums) in te schakelen:

.class {
font-variant: common-ligatures, oldstyle-nums;
}
.class { font-variant: common-ligatures, oldstyle-nums; }
.class {
  font-variant: common-ligatures, oldstyle-nums;
}

Op dezelfde manier kunnen meerdere functies worden ingeschakeld met behulp van font-feature-settings met een door komma's gescheiden lijst met waarden:

.class {
font-feature-settings: "liga", "onum";
}
.class { font-feature-settings: "liga", "onum"; }
.class {
  font-feature-settings: "liga", "onum";
}

In beide gevallen worden overgeërfde waarden volledig overschreven en kan de browserondersteuning variëren. Houd er rekening mee dat waarden voor font-variant soms zijn bedoeld om meerdere functies tegelijk in te schakelen (zie hoofdletters naar kleinkapitalen).

Bronnen

Als je klaar bent om aan de slag te gaan met CSS-stijlen, maak dan een bladwijzer voor onze syntaxiswoordenlijst van veelgebruikte OpenType-functies.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?