Configurações de recurso de fonte - CSS-Tricks

Anonim

Essa propriedade nos dá controle sobre as configurações tipográficas avançadas, como versaletes, ligaduras e traços. Para ativá-los, você deve declarar qual valor precisa entre aspas e, em seguida, 1ou onpara ativar. Como alternativa, você pode desativá-los com 0ou off:

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

Muitos outros valores, além das ligaduras padrão, são suportados pela font-feature-settingspropriedade, incluindo versaletes:

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

Valores

Esta é uma lista de todos os valores compatíveis font-feature-settings, mas certifique-se de verificar se a fonte da web que você está usando também oferece suporte a esses valores antes de experimentá-los:

  • liga: ligaduras padrão
  • dlig: ligaduras discricionárias
  • onum: figuras de estilo antigo
  • lnum: figuras de forro
  • tnum: figuras tabulares
  • zero: zero cortado
  • frac: frações
  • sups: sobrescrito
  • subs: subscrito
  • smcp: versalete
  • c2sc: pequenas capitais de capitais
  • case: formulários que diferenciam maiúsculas de minúsculas
  • hlig: ligaduras históricas
  • calt: alternativas contextuais
  • swsh: swashes
  • hist: formas históricas
  • ss**: conjuntos estilísticos
  • kern: kerning
  • locl: formas localizadas
  • rlig: ligaduras necessárias
  • medi: formas mediais
  • init: formulários iniciais
  • isol: formas isoladas
  • fina: formas finais
  • mark: marca
  • mkmk posicionamento marca a marca

Combinando várias configurações

Para adicionar vários recursos, você precisa seguir um valor por outro em uma lista separada por vírgulas, assim:

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

Prefixos

Para obter o melhor suporte em todo o espectro de navegadores, certifique-se de usar estes prefixos:

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

Suporte de navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
21 * 15 * 10 12 9,1

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 9,3

Mais Informações

  • Typotheque: recursos OpenType em navegadores da web - testes
  • W3C
  • MDN
  • Sandbox CSS3 de Richard Rutter