Nastavení funkce písma - Triky CSS

Anonim

Tato vlastnost nám poskytuje kontrolu nad pokročilými typografickými nastaveními, jako jsou malá písmena, ligatury a vzorníky. Chcete-li je aktivovat, musíte v uvozovkách deklarovat, jakou hodnotu potřebujete, a poté následovat buď 1nebo onpovolit. Případně, můžete je vypnout buď 0anebo off:

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

font-feature-settingsVlastnost podporuje mnoho dalších hodnot, kromě standardních ligatur , včetně malých písmen:

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

Hodnoty

Toto je seznam všech hodnot, které jsou podporovány font-feature-settings, ale než vyzkoušíte, zkontrolujte, zda webové písmo, které používáte, podporuje i tyto hodnoty:

  • liga: standardní ligatury
  • dlig: diskreční ligatury
  • onum: figurky starého stylu
  • lnum: čísla podšívky
  • tnum: tabulkové údaje
  • zero: lomítko nula
  • frac: zlomky
  • sups: horní index
  • subs: dolní index
  • smcp: malé čepice
  • c2sc: malá velká písmena od velkých písmen
  • case: formuláře citlivé na velká a malá písmena
  • hlig: historické ligatury
  • calt: kontextové alternativy
  • swsh: ozdoby
  • hist: historické formy
  • ss**: stylistické sady
  • kern: vyrovnání párů
  • locl: lokalizované formuláře
  • rlig: požadované ligatury
  • medi: mediální formy
  • init: počáteční formuláře
  • isol: izolované formy
  • fina: konečné formy
  • mark: označit
  • mkmk umístění značky po značce

Kombinace více nastavení

Chcete-li přidat více funkcí, musíte v seznamu odděleném čárkami sledovat jednu hodnotu druhou:

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

Předpony

Chcete-li získat nejlepší podporu v celém spektru prohlížeče, nezapomeňte použít tyto předpony:

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

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
21 * 15 * 10 12 9.1

Mobilní / Tablet

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

Více informací

  • Typotheque: Funkce OpenType ve webových prohlížečích - testy
  • W3C
  • MDN
  • Sandbox CSS3 Richarda Ruttera