Configuración de características de fuente - Trucos CSS

Anonim

Esta propiedad nos da control sobre configuraciones tipográficas avanzadas como versalitas, ligaduras y swashes. Para activarlos debe declarar qué valor necesita entre comillas y luego seguido de 1o onpara habilitar. Alternativamente, puede deshabilitarlos con 0o off:

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

La font-feature-settingspropiedad admite muchos otros valores, además de las ligaduras estándar , incluidas las versalitas:

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

Valores

Esta es una lista de todos los valores admitidos por font-feature-settings, pero asegúrese de verificar que la fuente web que está utilizando también sea compatible con estos valores antes de probarlos:

  • liga: ligaduras estándar
  • dlig: ligaduras discrecionales
  • onum: figuras de estilo antiguo
  • lnum: forro de figuras
  • tnum: figuras tabulares
  • zero: reducido a cero
  • frac: fracciones
  • sups: superíndice
  • subs: subíndice
  • smcp: letras minúsculas
  • c2sc: pequeñas capitales de capitales
  • case: formas que distinguen entre mayúsculas y minúsculas
  • hlig: ligaduras históricas
  • calt: alternativas contextuales
  • swsh: swashes
  • hist: formas históricas
  • ss**: conjuntos estilísticos
  • kern: interletrado
  • locl: formas localizadas
  • rlig: ligaduras requeridas
  • medi: formas medial
  • init: formas iniciales
  • isol: formas aisladas
  • fina: formas finales
  • mark: Marcos
  • mkmk posicionamiento marca a marca

Combinando múltiples configuraciones

Para agregar múltiples características, debe seguir un valor por otro en una lista separada por comas, así:

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

Prefijos

Para obtener el mejor soporte en todo el espectro de navegadores, asegúrese de utilizar estos prefijos:

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

Soporte de navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
21 * 15* 10 12 9.1

Móvil / Tablet

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

Más información

  • Typotheque: Funciones OpenType en navegadores web - Pruebas
  • W3C
  • MDN
  • Sandbox CSS3 de Richard Rutter