Referencia de CSS

Propiedad font-variant

DefiniciónEstablece la variante del tipo de letra
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Valor inicialnormal
Se aplica aTodos los elementos
Válida enmedios visuales
Se heredasi
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.