| Definición | Establece la variante del tipo de letra |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | normal |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | si |
| Definición en el estándar | w3.org/TR/CSS21/fonts.html#propdef-font-variant |
Ejemplos de uso
La propiedad font-variant permite elegir la variante con la que se muestra el tipo de letra seleccionado mediante la propiedad font-family. Las únicas variantes disponibles en CSS 2.1 son: normal (normal) y versalita (small-caps).
La variante versalita muestra el texto con letras mayúsculas de un tamaño similar a las letras minúsculas. El siguiente ejemplo muestra un párrafo con algunas palabras destacadas con la variante versalita:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <span style="font-variant: small-caps">Praesent tempor enim id metus</span>. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
Las diferencias visuales con las mayúsculas son muy evidentes, como muestra el siguiente ejemplo en el que los tres párrafos tienen el mismo contenido pero diferentes variantes tipográficas:
normal
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
mayúsculas normales
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
versalitas
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent tempor enim id metus. Vivamus augue. Nam risus. Morbi auctor. Phasellus dapibus urna sed ligula.
Si el tipo de letra utilizado no dispone de la variante versalita, el navegador genera automáticamente esa variante reemplazando las letras minúsculas por letras mayúsculas cuyo tamaño se escala de forma proporcional.
La propiedad font-variant es una de las menos utilizadas de CSS porque sólo permite seleccionar una variante (small-caps). Aunque existen muchas otras posibles variantes (números pequeños, números clásicos, tipo de letra condensado o expandido), el estándar oficial de CSS 2.1 reconoce que no existen propiedades ni valores para seleccionarlas.
Además de utilizar font-variant como simple recurso estético, en ocasiones se utiliza para mostrar en versalitas las siglas y acrónimos encerrados por la etiqueta <acronym> de HTML.