Propiedad font-variant de CSS

La propiedad font-variant establece el texto en normal o small-caps.

La propiedad font-variant puede tener dos valores: normal y small-caps. Normal es el valor predeterminado. Cuando seleccionamos small-caps para un texto, convierte las letras minúsculas en mayúsculas, pero estas letras convertidas se mostrarán un poco más pequeñas que las mayúsculas normales.

La propiedad font-variant puede incluirse como parte de una declaración abreviada de font.

INFO

Esta propiedad se ha ampliado en CSS Fonts Module Level 4. En CSS moderno, la propiedad font-variant puede tomar varios valores adicionales (por ejemplo, petite-caps, all-petite-caps, all-small-caps, titling-caps). Ten en cuenta que el soporte del navegador para estos valores modernos puede variar.

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	CSS1
Sintaxis DOM	object.style.fontVariant = "normal"; `<br>`(Nota: `fontVariant` es el nombre de propiedad en camelCase de JavaScript para `font-variant`.)

Sintaxis

Sintaxis de la propiedad font-variant de CSS

css

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

html

<!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>

Try it Yourself »

Resultado

Propiedad CSS font-variant

Valores

Valor	Descripción	Pruébalo
normal	Indica que los caracteres del texto serán normales. Este es el valor predeterminado de esta propiedad.	Pruébalo »
small-caps	Convierte las letras minúsculas en mayúsculas, pero las muestra en un tamaño menor que las mayúsculas normales.	Pruébalo »
all-small-caps	Convierte todas las letras en small-caps.	Pruébalo »
titling-caps	Muestra el texto en mayúsculas de título, típicamente usado para títulos.	Pruébalo »
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda el valor de la propiedad de su elemento padre.

Práctica

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

Especifica la línea base de una fuente.Especifica si un texto debe mostrarse en una fuente small-caps.Cambia el espaciado entre letras.Es una abreviatura de 'font-variant-caps', 'font-variant-numeric', 'font-variant-alternates', 'font-variant-ligatures' y 'font-variant-east-asian'.Determina la altura de una línea.

Propiedad font-variant de CSS ​

Sintaxis ​

Ejemplo de la propiedad font-variant: ​

Resultado ​