- 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
- 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
- Troubleshoot font issues
- 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-funktioner kan liknas vid hemliga fack i teckensnitt. Lås upp dem så får du tillgång till sätt att få teckensnitt att se ut och bete sig annorlunda på subtila och dramatiska sätt. Det är inte alla OpenType-funktioner som är lämpliga att använda hela tiden, men vissa är väldigt viktiga för god typografi.
Om du vill använda ett teckensnitts OpenType-funktioner i ditt projekt måste du inkludera dem i webbprojektet och sedan formatera texten med den CSS-kod som krävs. Vår syntaxguide innehåller exempel på varje funktion med kod som du kan kopiera och klistra in i CSS-koden.
Inkludera OpenType-funktioner i ditt projekt
Om du vill inkludera ett teckensnitts OpenType-funktioner i ett webbprojekt ska du gå till webbprojektsidan och klicka på projektets redigeringslänk. Markera rutan OpenType-funktioner i avsnittet Teckenuppsättning.
När rutan är markerad visas en lista med funktioner som är tillgängliga för den specifika webbteckensnittsfamiljen, t.ex. ligaturer, alternativa tecken eller kapitäler.
Listan visar de OpenType-funktioner som är tillgängliga i alla familjens vikter och stilar. Om en funktion endast ingår för specifika vikter eller stilar står den inte med på listan.
Kolla webbläsarstödet för de funktioner du använder
Dåligt webbläsarstöd för inställningarna font-variant och font-feature innebär att OpenType-funktionerna kanske inte fungerar korrekt i alla sammanhang som är viktiga för dig.
Stödet är förbryllande nyanserat. Nyare webbläsarversioner som påstår att de stöder funktioner gör det bara till viss del, och äldre webbläsare som inte stöder OpenType-funktioner kan krascha på grund av dem. Som standard aktiverar Chrome inte funktioner som bör vara aktiverade som standard (som vanliga ligaturer och kontextuella alternativ). Safari på masOS och iOS ignorerar alla angivna värden på font-feature-settings och väljer i stället att aktivera ett fåtal funktioner som standard – och dess standardval går inte att ändra. Vissa versioner av Firefox (version 15 och tidigare) har problem när flera stilistiska uppsättningar är aktiverade. Om OpenType-funktioner används i Chrome 32 och äldre versioner fungerar webbteckensnitt inte.
-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";
Stödet i moderna webbläsare beror väldigt mycket på leverantörsprefix. I hjälpdokumentet Syntax för OpenType-funktioner i CSS-kod hittar du kod full av egenskaper med leverantörsprefix som ser ut som i exemplet ovan.
Formera text med OpenType-funktioner med CSS-kod
CSS-syntaxen för att aktivera OpenType-funktioner utvecklas fortfarande. Det du behöver känna till är att det finns både högnivå- och lågnivåegenskaper – och att arv är särskilt knepigt.
Lågnivåegenskapen font-feature-settings i CSS stöds till viss del i webbläsare via leverantörsprefix, men den är besvärlig att använda av två anledningar. För det första förlitar den sig på OpenType-funktionstaggar med fyra tecken som är svåra att komma ihåg. För det andra anges alla funktionstaggar i samma egenskap, vilket kan bli snårigt. Se syntaxen för specifika OpenType-funktioner och syntaxen för att använda flera OpenType-funktioner.
Högnivåegenskapen font-variant i CSS-kod och dess underegenskaper är utmärkta eftersom de använder värden med naturligt språk som ”small-caps” och ”diagonal-fractions”. W3C vill att vi ska använda dem när det går, men webbläsarstödet är obefintligt. Ändå är det en bra idé att vänja sig vid syntaxen.
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
Så vi använder både font-variant och font-feature-settings och beaktar hur de är tänkta att fungera. Vi kommer att specificera den lättlästa font-variant först i CSS-koden, som i koden ovan.
Arv
Eftersom font-feature-setting är en lågnivåegenskap som är avsedd ”för specialfall där bruket av den är det enda sättet att komma åt en viss sällan använd teckensnittsegenskap” åsidosätter den font-variant oavsett källkodsordning. Men var försiktig – den åsidosätter även sig själv:
body {
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
}
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp"; /* gör att onum i body-deklarationen åsidosätts */
}
Alla ärvda värden på font-feature-settings åsidosätts när egenskapen återanvänds. I exemplet ovan skulle onum-värdet behöva inkluderas igen om element med klassen class ska visas både med kapitäler (smcp) och medievalsiffror (onum) aktiverat, så vi skulle kunna skriva om deklarationen så här:
.class {
font-variant-caps: small-caps;
font-feature-settings: "onum", "smcp";
}
Indexerade värden på font-feature-settings
Vissa värden på font-feature-settings är lite mer komplexa. I exemplen hittills har varje värde varit en sträng (eller en kommaavgränsad uppsättning av strängar). När- eller frånvaron av funktionstaggar som ”onum” och ”smcp” är som ett binärt val: funktionerna är antingen på eller av.
Det är begripligt. Men vad händer om ett teckensnitt t.ex. innehåller två olika swash-versioner av versala A? I detta fall vill vi inte bara aktivera swashar: vi vill aktivera swashar och välja en viss swash. Därför kan vi lägga till ett numeriskt index till värdet, efter strängen:
font-feature-settings: "swsh" 2;
Du kanske undrar över vilken siffra du ska använda? Hur många olika swashar finns det i ett teckensnitt? Det beror på teckensnittet. 0 innebär att swash-funktionen stängs av. Detsamma gäller andra funktioner som använder numeriska index, t.ex. stilalternativ och stiluppsättningar.
Använda flera OpenType-funktioner
Egenskapen font-variant är CSS-stenografi för alla font-variant-underegenskaper. Vi kan göra något som detta för att aktivera vanliga ligaturer och medievalsiffror:
.class {
font-variant: common-ligatures, oldstyle-nums;
}
På samma vis kan flera funktioner aktiveras med font-feature-inställningar genom en kommaavgränsad lista med värden:
.class {
font-feature-settings: "liga", "onum";
}
I båda fallen åsidosätts ärvda värden helt, och webbläsarstödet kan variera. Tänk på att värdena på font-variant ibland har utformats för att aktivera flera funktioner samtidigt (se versaler till kapitäler).
Resurser
Om du är beredd att börja formatera med CSS-kod bör du spara ett bokmärke till vår syntaxordlista med ofta använda OpenType-funktioner
