Font-feature-instellingen - CSS-trucs

Anonim

Deze eigenschap geeft ons controle over geavanceerde typografische instellingen zoals small caps, ligaturen en sierletters. Om ze te activeren, moet u tussen aanhalingstekens aangeven welke waarde u nodig heeft en vervolgens gevolgd door 1of onom in te schakelen. Als alternatief kunt u ze uitschakelen met 0of off:

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

Naast de standaard ligaturen worden veel andere waarden door de font-feature-settingseigenschap ondersteund, waaronder small caps:

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

Waarden

Dit is een lijst met elke waarde die wordt ondersteund font-feature-settings, maar zorg ervoor dat u controleert of het weblettertype dat u gebruikt deze waarden ook ondersteunt voordat u ze probeert:

  • liga: standaard ligaturen
  • dlig: discretionaire ligaturen
  • onum: figuren in oude stijl
  • lnum: voering cijfers
  • tnum: figuren in tabelvorm
  • zero: nul gesneden
  • frac: breuken
  • sups: superscript
  • subs: subscript
  • smcp: small caps
  • c2sc: kleine hoofdletters uit hoofdletters
  • case: hoofdlettergevoelige formulieren
  • hlig: historische ligaturen
  • calt: contextuele plaatsvervangers
  • swsh: sierletters
  • hist: historische vormen
  • ss**: stilistische sets
  • kern: tekenspatiëring
  • locl: gelokaliseerde formulieren
  • rlig: vereiste ligaturen
  • medi: mediale vormen
  • init: eerste vormen
  • isol: geïsoleerde vormen
  • fina: definitieve vormen
  • mark: mark
  • mkmk mark-to-mark positionering

Meerdere instellingen combineren

Om meerdere functies toe te voegen, moet u de ene waarde door de andere volgen in een door komma's gescheiden lijst, zoals:

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

Voorvoegsels

Zorg ervoor dat u deze voorvoegsels gebruikt om de beste ondersteuning in het hele browserspectrum te krijgen:

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

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
21 * 15 * 10 12 9.1

Mobiel / tablet

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

Meer informatie

  • Typotheque: OpenType-functies in webbrowsers - Tests
  • W3C
  • MDN
  • De CSS3 Sandbox van Richard Rutter