BaselineLab

Playground de font-variant en CSS

Explora font-variant con controles para caps, ligaduras, variantes numéricas, formas east-asian y posición sobre un bloque de texto real.

Preguntar a la IA

Playground de font-variant en CSS

Respuesta generada con openai/gpt-5.4-nano. La IA puede cometer errores. Revisa siempre el resultado.

BaselineLab compara font-variant con texto real: Office affinity, efficient flow. Prueba numeros 1234567890, fracciones 1/2 y 3/4, ordinales 1st y 2nd. El resultado depende de las variantes OpenType disponibles en la fuente.

HTML
<p class="font-variant-sample">
  BaselineLab compara font-variant con texto real: Office affinity, efficient flow.
  Prueba numeros 1234567890, fracciones 1/2 y 3/4, ordinales 1st y 2nd.
  El resultado depende de las variantes OpenType disponibles en la fuente.
</p>
Tailwind CSS
Algunas clases con valores arbitrarios pueden sustituirse por clases nativas, según el valor y la configuración de Tailwind CSS.
<p class="max-w-2xl [font-family:Georgia,_Cambria,_Times_New_Roman,_Times,_serif] text-2xl font-semibold leading-normal [font-variant:small-caps_common-ligatures_oldstyle-nums_tabular-nums_diagonal-fractions_ordinal]">
  BaselineLab compara font-variant con texto real: Office affinity, efficient flow.
  Prueba numeros 1234567890, fracciones 1/2 y 3/4, ordinales 1st y 2nd.
  El resultado depende de las variantes OpenType disponibles en la fuente.
</p>
CSS
.font-variant-sample {
  max-inline-size: 40rem;
  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.45;
  font-variant: small-caps common-ligatures oldstyle-nums tabular-nums diagonal-fractions ordinal;
}