Propiedad CSS font-variant
La propiedad CSS font-variant permite mostrar el texto como normal o en versalitas. ¡Prueba ejemplos de la propiedad font-variant!
La propiedad CSS font-variant controla el uso de glifos alternativos en una fuente — principalmente las versalitas. Las versalitas representan las letras minúsculas como mayúsculas dibujadas aproximadamente a la altura de las minúsculas originales, dando a títulos, abreviaciones y acrónimos una apariencia refinada y uniforme sin la estridencia de las mayúsculas completas.
En su forma clásica (CSS 1), font-variant acepta uno de dos valores: normal (el predeterminado) o small-caps. Con small-caps, las letras minúsculas se convierten en glifos mayúsculos que se muestran un poco más pequeños que las letras mayúsculas normales, mientras que las letras que ya eran mayúsculas conservan su tamaño normal.
Cuándo usarlo
font-variant: small-caps es útil cuando se desea un énfasis que resulte elegante en lugar de llamativo:
- Acrónimos y abreviaciones dentro del texto corriente (p. ej., "html", "css") para que no dominen la línea con mayúsculas de altura completa.
- Estilo de letra capitular o de entrada en la primera línea de un artículo, a menudo combinado con ::first-line.
- Encabezados, créditos y pies de figura en maquetaciones editoriales o de estilo impreso.
Como el valor es heredado, aplicarlo a un contenedor lo aplica a todo el texto descendiente a menos que un elemento hijo lo sobreescriba.
La propiedad font-variant también puede establecerse como parte de una declaración abreviada de font, junto con font-style, font-weight, font-size y font-family.
En CSS Fonts Module Level 4, font-variant se convirtió en una abreviatura de una familia de propiedades individuales: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures y font-variant-east-asian. Esto le permite aceptar muchos más valores (como all-small-caps, petite-caps, oldstyle-nums y slashed-zero). Los valores clásicos normal y small-caps siguen funcionando en todos los navegadores; la compatibilidad con los valores más nuevos depende tanto del navegador como de si la fuente elegida contiene realmente esos glifos.
| 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 | CSS1 |
| Sintaxis DOM | object.style.fontVariant = "normal"; <br>(Nota: fontVariant es el nombre de la propiedad JavaScript en camelCase para font-variant.) |
Sintaxis
Sintaxis de la propiedad CSS font-variant
font-variant: normal | small-caps | all-small-caps | titling-caps | initial | inherit;Ejemplo de la propiedad font-variant:
Ejemplo de la propiedad CSS font-variant con small-caps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">However, this text uses small-caps.</p>
</body>
</html>Resultado
Segundo ejemplo: all-small-caps
El valor all-small-caps (del nivel 4 abreviado) representa cada letra como versalitas, incluidas las que ya eran mayúsculas — útil para encabezados donde se desea un aspecto uniforme de versalitas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.small {
font-variant: small-caps;
}
.all {
font-variant: all-small-caps;
}
</style>
</head>
<body>
<p class="small">The Quick Brown Fox</p>
<p class="all">The Quick Brown Fox</p>
</body>
</html>Con small-caps, las letras mayúsculas de "The", "Quick", "Brown" y "Fox" mantienen su altura completa; con all-small-caps, también se reducen a la altura de las versalitas.
Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| normal | Los caracteres de texto se renderizan de forma normal. Es el valor predeterminado. | Pruébalo » |
| small-caps | Convierte las letras minúsculas en glifos mayúsculos mostrados a un tamaño menor; las mayúsculas existentes conservan su tamaño completo. | Pruébalo » |
| all-small-caps | Convierte tanto las letras minúsculas como las mayúsculas en versalitas (Nivel 4). | Pruébalo » |
| petite-caps | Similar a small-caps pero usando glifos de petite-caps, cuando la fuente los proporciona (Nivel 4). | Pruébalo » |
| initial | Establece la propiedad en su valor predeterminado (normal). | Pruébalo » |
| inherit | Hereda el valor de la propiedad del elemento padre. |
Propiedades relacionadas
- font — la abreviatura que puede incluir
font-variant. - font-style — texto normal, en cursiva u oblicuo.
- font-weight — negrita del texto.
- text-transform — fuerza
uppercase/lowercase/capitalize(cambia los caracteres, a diferencia de small-caps que solo cambia la forma del glifo). - letter-spacing — combina bien con las versalitas para mejorar la legibilidad de los acrónimos.