Font-feature-settings

2. prosince 2014 Písma CSS CSS vlastnosti

S CSS vlastností font-feature-settings lze dosáhnout zajímavější typografie u OpenType písem.

Podpora
Zápis
Vylepšení
OpenType písma
Specifikace
Odkazy jiam

Pro vytvoření lépe čitelného textu a lepší přenositelnosti písem vznikl tzv. formát OpenType. Tento formát umožňuje, aby v souboru s písmy bylo mnohem více symbolů. To má tu výhodu, že OpenType písmo může kromě standardních znaků a diakritiky nabízet i více variant téhož znaku, třeba závislých na kontextu a podobně.

Jde tak vytvořit i spojité písmo, kde se přirozeně napojují jednotlivé znaky. Daní za to je potom případná větší datová náročnost.

Podpora

Funkční od IE 10, Chrome 16, Firefoxu 4.

Zápis

Nejprve je potřeba pravidlem @font-face připojit OpenType písmo:

@font-face {  
  font-family: 'Název';  
  src: url('pismo.otf') format('opentype');  
}

Následně ho nastavit nějakému prvku a konečně použít font-feature-settings (momentálně vyžaduje prefixy):

element {
  font-feature-settings: 
    "vlastnost" hodnota, 
    "dalsi-vlastnost" hodnota
}

Hodnota bývá většinou 0 nebo 1 ve smyslu zapnuto/vypnuto, jednotlivé hodnoty je možné kombinovat. Funkčnost stojí a padá na podpoře dané vlastnosti přímo v použitém fontu.

Vylepšení

Z pohledu webových stránek jsou zajímavé vlastnosti jako je:

Kontextové alternativy – písmena mohou mít různé varianty, které se použijí dle kontextu. Je tak možné vytvořit spojité písmo.
```
font-feature-settings: "calt" 1
```
Calt je zkratka pro Contextual Alternates.

Na následujícím pohyblivém obrázku je například písmeno „i“ ve 3 variantách (nespojené, spojené a na začátku slova).
Vyrovnání (Kerning) – přizpůsobení vzdáleností mezi určitými písmeny, aby více lahodily oku.
```
font-feature-settings: "kern" 1
```
Na obrázku kerning zmenší zbytečně velkou mezeru mezi „A“ a „T“.
Svazování (Ligatura) – optické spojení více písmen v jeden znak. Příkladem budiž například „fi“ nebo „fl“.
```
font-feature-settings: "liga" 1
```
Zlomky – hezčí podoba zápisu zlomků, kdy je čitatel i jmenovatel vertikálně odlišen. Simulovat to někdy lze pomocí speciálních znaků: 3/4 vs. ¾.
```
font-feature-settings: "frac" 1
```
Různá velikost čísel – někdy může lépe vypadat, když mají číslice různou velikost.
```
font-feature-settings: "onum" 1
```
Zkratka onum znamená Oldstyle number (starý styl čísel). Tento styl používá například písmo Georgia (ukázka).