Font-feature-settings - CSS-tricks

Anonim

Den här egenskapen ger oss kontroll över avancerade typografiska inställningar som små bokstäver, ligaturer och swashes. För att aktivera dem måste du ange vilket värde du behöver i citat och sedan följt av antingen 1eller för onatt aktivera. Alternativt kan du inaktivera dem med antingen 0eller off:

.element ( /* these two values do the same thing */ font-feature-settings: "liga" 1; font-feature-settings: "liga1" on; )

Många andra värden, förutom standardligaturer, stöds av font-feature-settingsegenskapen, inklusive små bokstäver:

.element ( font-feature-settings: "smcp" 1; )

Värden

Det här är en lista över alla värden som stöds av font-feature-settings, men se till att du kontrollerar webbteckensnittet du använder stöder även dessa värden innan du försöker dem:

  • liga: standard ligaturer
  • dlig: diskretionära ligaturer
  • onum: gamla stilfigurer
  • lnum: fodersiffror
  • tnum: figurer i tabell
  • zero: skuren noll
  • frac: bråk
  • sups: överskrift
  • subs: prenumeration
  • smcp: små bokstäver
  • c2sc: små huvudstäder från huvudstäder
  • case: skiftlägeskänsliga former
  • hlig: historiska ligaturer
  • calt: kontextuella alternativ
  • swsh: swashes
  • hist: historiska former
  • ss**: stilistiska uppsättningar
  • kern: kerning
  • locl: lokaliserade formulär
  • rlig: nödvändiga ligaturer
  • medi: mediala former
  • init: initiala former
  • isol: isolerade former
  • fina: slutliga blanketter
  • mark: märke
  • mkmk mark-to-mark positionering

Kombinera flera inställningar

För att lägga till flera funktioner måste du följa ett värde av ett annat i en kommaseparerad lista, som så:

.element ( font-feature-settings:"smcp" 1, "onum" 1; )

Prefix

För att få bästa stöd över webbläsarspektret, se till att använda dessa prefix:

.element ( -webkit-font-feature-settings: "smcp" 1; -moz-font-feature-settings: "smcp" 1; -ms-font-feature-settings: "smcp" 1; font-feature-settings: "smcp" 1; )

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
21 * 15 * 10 12 9.1

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 9.3

Mer information

  • Typotheque: OpenType-funktioner i webbläsare - Tester
  • W3C
  • MDN
  • Richard Rutter's CSS3 Sandbox