font-feature-settings

Sumário

A propriedade font-feature-settings do CSS te dá controle sobre tipografia avançada nas fontes do tipo OpenType.

Nota: Sempre que possível, deve usar o font-variant (en-US) propriedade abreviada ou uma propriedade extensa associada, font-variant-ligatures (en-US), font-variant-caps (en-US), font-variant-east-asian (en-US), font-variant-alternates (en-US), font-variant-numeric (en-US) ou font-variant-position (en-US).

Esta propriedade é um recurso de baixo nível projetado para lidar com casos especiais onde não existe outra maneira de habilitar ou acessar um recurso de fonte OpenType.

Em particular, esta propriedade CSS não deve ser usada para habilitar small caps.

Initial valuenormal
Aplica-se aall elements and text. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation type (en-US)discrete

Sintaxe

css
/* Use the default settings */
font-feature-settings: normal;

/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
  "smcp",
  "swsh" 2;

/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;

Valores

normal

Text is laid out using default settings.

<feature-tag-value>

Ao renderizar texto, a lista de características OpenType é passada para o mecanismo de layout de texto para ativar ou desativar recursos do tipo de letra. A tag é sempre uma <string> (en-US) de 4 caracteres ASCII. Se possuir mais ou menos caracteres ou conter caracteres fora da faixa U+20 - U+7E, toda a propriedade é invalida. O valor é um inteiro positivo. As duas palavras-chaves on e off são sinônimos de 1 e 0 respectivamente. Se nenhum valor é definido, o padrão é 1. Para características OpenType não-booleanas (ex. stylistic alternates), o valor implica em um glifo particular para ser selecionado; para valores booleanos, é um interruptor.

Sintaxe formal

font-feature-settings = 
  normal                | (en-US)
  <feature-tag-value># (en-US)  

<feature-tag-value> = 
  <opentype-tag> [ (en-US) <integer [0,∞]> (en-US) | (en-US) on | (en-US) off ] (en-US)? (en-US)  

<opentype-tag> = 
  <string> (en-US)

Exemplos

css
/* use small-cap alternate glyphs */
.smallcaps {
  font-feature-settings: "smcp" on;
}

/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps {
  font-feature-settings: "c2sc", "smcp";
}

/* enable historical forms */
.hist {
  font-feature-settings: "hist";
}

/* disable common ligatures, usually on by default */
.noligs {
  font-feature-settings: "liga" 0;
}

/* enable tabular (monospaced) figures */
td.tabular {
  font-feature-settings: "tnum";
}

/* enable automatic fractions */
.fractions {
  font-feature-settings: "frac";
}

/* use the second available swash character */
.swash {
  font-feature-settings: "swsh" 2;
}

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}

Especificações

Specification
CSS Fonts Module Level 4
# font-feature-settings-prop

Compatibilidade com navegadores

BCD tables only load in the browser

Veja Também