Regla CSS @font-feature-values
La regla @font-feature-values permite usar nombres legibles en la propiedad font-variant-alternates. Conoce sus valores y ejemplos.
La regla at-rule @font-feature-values te permite asignar un nombre legible a un índice numérico de función OpenType, de modo que puedas referirte a los glifos alternativos de una fuente por nombre en lugar de por número al usar la propiedad font-variant-alternates.
Esta página explica el problema que resuelve la regla, su sintaxis, los bloques de funciones que acepta y un ejemplo completo funcional.
Por qué existe
Muchas fuentes OpenType incluyen glifos alternativos además de la forma predeterminada de cada carácter — floreos (adornos decorativos), ornamentos, alternativas estilísticas, formas históricas, etc. Dentro de la fuente, cada alternativa se identifica únicamente por un número (un índice). Sin esta regla at-rule tendrías que recordar que, por ejemplo, "el floreo elegante es el índice 1" y codificar ese número en todas partes.
@font-feature-values te permite escribir esa asignación una sola vez, darle al índice un nombre como fancy, y luego llamar a swash(fancy) en tu CSS. El nombre se aplica por familia de fuente, por lo que dos fuentes distintas pueden definir cada una su propio floreo fancy apuntando a índices diferentes.
Dos aspectos a tener en cuenta:
- Funciona exclusivamente con
font-variant-alternates— no tiene efecto en ninguna otra propiedad. - Solo hace algo si la fuente correspondiente está realmente cargada y esa fuente contiene los glifos alternativos referenciados. Si necesitas activar funciones OpenType de bajo nivel mediante su etiqueta de cuatro letras, usa
font-feature-settings.
Puede colocarse en el nivel superior de una hoja de estilos o dentro de una regla at-rule de grupo condicional como @media.
Bloques de funciones
El cuerpo de la regla at-rule puede contener cualquiera de estos bloques con nombre, cada uno mapeando un nombre a un índice:
@swash@annotation@ornaments@stylistic@styleset@character-variant
Cada nombre de bloque se corresponde con la notación funcional equivalente en font-variant-alternates (un nombre @swash es usado por swash(), un nombre @ornaments por ornaments(), y así sucesivamente).
Sintaxis
Sintaxis de la regla at-rule CSS @font-feature-values
@font-feature-values <family-name> {
@swash { name: index; }
@annotation { name: index; }
@ornaments { name: index; }
@stylistic { name: index; }
@styleset { name: index; }
@character-variant { name: index; }
}Ejemplo de la regla at-rule @font-feature-values:
Ejemplo de la regla at-rule CSS @font-feature-values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>@Font-feature-values at-rule example</h2>
<p>
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
</p>
<p>This property is supported by Firefox and Safari.</p>
<p class="variant">This property is supported by Firefox and Safari.</p>
</body>
</html>Aquí, @swash { fancy: 1; } nombra el índice 1 de la fuente Leitura Display Swashes como fancy. El párrafo .variant activa ese alternativo con font-variant-alternates: swash(fancy). Como la fuente nombrada no está cargada en este fragmento, el texto recurre a una fuente predeterminada y los floreos no se renderizarán — el objetivo del ejemplo es mostrar la configuración, no el resultado visual. Sustituye por una fuente que tengas disponible mediante @font-face para ver los alternativos.
Compatibilidad con navegadores
@font-feature-values es compatible con Firefox, Safari y Chrome/Edge (Chromium añadió soporte en la versión 128, agosto de 2024). Internet Explorer nunca lo admitió. Como los glifos alternativos son puramente decorativos, tratarlos como una mejora progresiva es seguro: los navegadores y fuentes que no admiten la función simplemente muestran el glifo predeterminado.
Valores
| Valor | Descripción |
|---|---|
| @swash | Especifica un nombre de función que funciona con la notación funcional swash() de font-variant-alternates. |
| @annotation | Especifica un nombre de función que funciona con la notación funcional annotation() de font-variant-alternates. |
| @ornaments | Especifica un nombre de función que funciona con la notación funcional ornaments() de font-variant-alternates. |
| @stylistic | Especifica un nombre de función que funciona con la notación funcional stylistic() de font-variant-alternates. |
| @styleset | Especifica un nombre de función que funciona con la notación funcional styleset() de font-variant-alternates. |
| @character-variant | Especifica un nombre de función que funciona con la notación funcional character-variant() de font-variant-alternates. |