Propiedad CSS font-feature-settings
La propiedad CSS font-feature-settings controla funciones tipográficas avanzadas en fuentes OpenType. Lee sobre la propiedad y prueba ejemplos.
La propiedad font-feature-settings te da control de bajo nivel sobre las funciones tipográficas avanzadas integradas en las fuentes OpenType — como versalitas, cifras de estilo antiguo, ligaduras, fracciones y alternativas estilísticas. Estas funciones son diseñadas por el diseñador tipográfico y se almacenan dentro del archivo de fuente; font-feature-settings es el interruptor que las activa o desactiva.
El valor es la palabra clave normal (el valor por defecto) o una lista de pares <feature-tag-value> separados por comas. Cada par es una etiqueta de función OpenType de cuatro letras escrita como cadena de texto, seguida opcionalmente por un valor:
font-feature-settings: "smcp" 1; /* enable small caps */
font-feature-settings: "smcp" on; /* same thing — "on" means 1 */
font-feature-settings: "smcp", "onum"; /* two features, omitted value defaults to 1 */
font-feature-settings: "liga" 0; /* disable standard ligatures */Las palabras clave on y off son sinónimos de 1 y 0. La mayoría de las funciones son simples interruptores de activación/desactivación, pero algunas (como los conjuntos estilísticos o las variantes de caracteres) aceptan un entero mayor para seleccionar una variante específica. La función solo tiene efecto visible cuando la fuente renderizada contiene realmente esa función — si la fuente no la tiene, la declaración se ignora silenciosamente.
Cuándo usarlo (y cuándo no)
font-feature-settings es la vía de escape. Para necesidades comunes, prefiere la abreviatura de alto nivel font-variant y sus subpropiedades (font-variant-caps, font-variant-numeric, font-variant-ligatures, …). Son más fáciles de leer, se heredan de forma limpia y retroceden con gracia:
/* Preferred — high-level and readable */
font-variant-caps: small-caps;
/* Low-level equivalent — only when the font has no friendlier path */
font-feature-settings: "smcp";Recurre a font-feature-settings solo cuando necesites una función que no tiene una palabra clave font-variant dedicada — por ejemplo, un conjunto estilístico específico de la fuente ("ss01") o una función discrecional que la fuente expone por etiqueta.
Un problema importante a tener en cuenta: font-feature-settings es todo o nada. Dado que toda la lista reemplaza cualquier valor heredado, volver a declararlo en un elemento hijo restablece todas las funciones que estableciste en el padre. Mantén todas las etiquetas que deseas activas en una sola declaración en lugar de distribuirlas en varias reglas.
Etiquetas de función OpenType comunes
| Etiqueta | Función | Uso típico |
|---|---|---|
smcp | Versalitas | Renderiza las letras minúsculas como mayúsculas pequeñas. |
c2sc | Mayúsculas a versalitas | Convierte también las letras mayúsculas en versalitas. |
liga | Ligaduras estándar | Combina pares de letras como fi, fl (activo por defecto; establece 0 para desactivar). |
dlig | Ligaduras discrecionales | Ligaduras decorativas como ct, st. |
onum | Cifras de estilo antiguo | Números con ascendentes/descendentes que encajan en texto corrido. |
lnum | Cifras de alineación | Números de altura uniforme alineados con la altura de las mayúsculas. |
tnum | Cifras tabulares | Números de ancho fijo para columnas de números. |
frac | Fracciones | Formatea 1/2 como una fracción tipográfica. |
kern | Interletraje | Ajusta el espacio entre pares de letras específicos. |
swsh | Florituras | Adornos decorativos en los glifos. |
La compatibilidad con los navegadores es excelente en los navegadores modernos, pero para motores más antiguos es posible que aún veas las versiones prefijadas con -webkit-, -moz- y -ms- de esta propiedad.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontFeatureSettings = "normal"; |
Sintaxis
Sintaxis de la propiedad CSS font-feature-settings
font-feature-settings: normal | <feature-tag-value># | initial | inherit;Ejemplo de la propiedad font-feature-settings:
Ejemplo de la propiedad CSS font-feature-settings con el valor smcp
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
}
h3 {
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<h2>Font-feature-settings example</h2>
<h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
</body>
</html>Ejemplo con múltiples funciones
Puedes activar varias funciones a la vez con una lista separada por comas. Aquí activamos las cifras de estilo antiguo y desactivamos las ligaduras estándar en el mismo elemento:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-feature-settings: "onum" 1, "liga" 0;
}
</style>
</head>
<body>
<p>Order 1234567890 ships in office. </p>
</body>
</html>Ten en cuenta que los números cambian solo si la fuente elegida incluye numerales de estilo antiguo. Si una función no está disponible en la fuente, esa parte de la declaración no tiene efecto.
Valores
| Valor | Descripción |
|---|---|
| normal | Este es el valor por defecto de esta propiedad. |
<feature-tag-value> | Al renderizar texto, la lista de valores de etiquetas de función OpenType se pasa al motor de composición de texto para activar o desactivar las funciones de la fuente. |
| initial | Hace que la propiedad use su valor por defecto. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
- font-variant — la abreviatura de alto nivel que debería ser tu primera elección para versalitas, ligaduras y cifras numéricas.
- font-family — elegir una fuente que contenga realmente las funciones OpenType que deseas activar.
- text-transform — cambia la capitalización de los propios caracteres, a diferencia de las versalitas que solo cambia su apariencia.
- letter-spacing — ajusta el espacio entre caracteres a nivel de maquetación en lugar de a través del interletraje de la fuente.