- Adobe Fonts User Guide
- Introduction
- Font licensing
- Font licensing
- Manage your account
- Licensing for Creative Cloud for enterprise customers
- Adding font licenses to your account
- Removing fonts from the subscription library
- Adobe Fonts not available to Adobe IDs registered in China
- Why aren't these fonts included in my Creative Cloud subscription?
- Morisawa font removal September 2021
- Getting and using fonts
- Using Adobe Fonts in Creative Cloud apps
- Manage your fonts
- Resolve missing fonts in desktop applications
- Using fonts in InDesign
- Fonts and typography
- Using web fonts in HTML5 Canvas documents
- Using fonts in InCopy
- How to use fonts in Adobe Muse
- Using web fonts in Muse
- Packaging font files
- Troubleshooting guide: Adding fonts
- Added fonts aren't showing to font menu
- "Unable to add one or more fonts" or "A font with the same name is already installed"
- What happens when a font I'm using is updated by the foundry?
- Web design and development
- Add fonts to your website
- Troubleshooting guide: Adding fonts to a website
- Using web fonts in HTML email or newsletters
- Using web fonts with Accelerated Mobile Pages (AMP)
- CSS selectors
- Customize web font performance with font-display settings
- Embed codes
- Dynamic subsetting & web font serving
- Font events
- Why are my web fonts from use.typekit.net?
- Site can't connect to use.typekit.net
- Using web fonts with CodePen
- Browser and OS support
- Domains
- Using web fonts when developing locally
- Content security policy
- Printing web fonts
- Language support and OpenType features
- Font technology
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.
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";
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";
}
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 */
}
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";
}
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;
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;
}
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";
}
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.