Propiedad CSS font-variant-caps

En CSS1 y CSS2, la propiedad font-variant especificaba las mayúsculas pequeñas (small caps). En CSS3, se convirtió en un atajo para varias propiedades, incluida font-variant-caps. Esta propiedad permite seleccionar glifos alternativos para mayúsculas pequeñas, mayúsculas pequeñas de tamaño reducido (petite caps) y mayúsculas de título. Los valores comunes incluyen:

normal
small-caps
all-small-caps
petite-caps
all-petite-caps
unicase
titling-caps

Cuando una fuente determinada incluye glifos de letras mayúsculas de diferentes tamaños, la propiedad font-variant-caps selecciona los más adecuados. Si los glifos de mayúsculas pequeñas no están disponibles, se renderizan utilizando glifos en mayúsculas.

La representación real depende del soporte de funciones OpenType de la fuente.

Valor inicial	normal
Se aplica a	Todos los elementos. También se aplica a ::first-letter y ::first-line.
Heredable	Sí.
Animable	No.
Versión	CSS3
Sintaxis DOM	object.style.fontVariantCaps = "petite-caps";

Sintaxis

Sintaxis de la propiedad CSS font-variant-caps

css

font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;

Ejemplo de la propiedad font-variant-caps:

Ejemplo de la propiedad CSS font-variant-caps con los valores all-small-caps, small-caps y normal

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .all-small-caps {
        font-variant-caps: all-small-caps;
      }
      .small-caps {
        font-variant-caps: small-caps;
      }
      .normal {
        font-variant-caps: normal;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-caps property example</h2>
    <p class="all-small-caps">
      The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
    </p>
    <p class="small-caps">Small caps!</p>
    <p class="normal">Normal caps!</p>
  </body>
</html>

Try it Yourself »

Resultado

CSS font-variant-caps Property

Valores

Valor	Descripción
normal	No se activa el uso de glifos alternativos.
small-caps	Muestra mayúsculas pequeñas. Los glifos small-caps utilizan la forma de letras mayúsculas, pero se reducen al tamaño de las letras minúsculas.
all-small-caps	Muestra mayúsculas pequeñas tanto para letras mayúsculas como minúsculas.
petite-caps	Muestra mayúsculas pequeñas de tamaño reducido (petite caps).
all-petite-caps	Muestra mayúsculas pequeñas de tamaño reducido para ambas letras mayúsculas y minúsculas.
unicase	Muestra una mezcla de mayúsculas pequeñas para letras mayúsculas con minúsculas normales.
titling-caps	Muestra mayúsculas de título.

Nota: initial e inherit son palabras clave de CSS y se pueden usar con cualquier propiedad CSS.

Compatibilidad con navegadores

Navegador	Compatibilidad
Chrome	48+
Edge	79+
Firefox	34+
Safari	9.1+
Opera	35+

Nota: font-variant-caps forma parte del atajo font-variant. Al usar el atajo, incluya explícitamente font-variant-caps para preservar su valor, ya que otros valores del atajo podrían sobrescribirlo.

Práctica

¿Qué hace la propiedad CSS 'font-variant-caps'?

Se utiliza para transformar el texto a mayúsculas o minúsculas.Permite al usuario ajustar el uso de mayúsculas en el texto.Se utiliza para controlar el grosor (negrita) de la fuente.Proporciona control sobre el uso de glifos alternativos para letras mayúsculas y mayúsculas pequeñas.Habilita el uso de estilos de fuente únicos.

Propiedad CSS font-variant-caps ​

Sintaxis ​

Ejemplo de la propiedad font-variant-caps: ​

Resultado ​

Valores ​

Compatibilidad con navegadores ​