Playground de font-style en CSS

Explora font-style con controles para comparar cursiva real, oblicua sintetizada y ángulos de inclinación sobre un bloque de texto real.

BaselineLab permite comparar font-style con texto real, cursivas propias de la fuente, oblicuas sintetizadas y angulos ajustables antes de copiar el CSS. El resultado depende de las variantes disponibles en la familia tipografica.

HTML

<p class="font-style-sample">
  BaselineLab permite comparar font-style con texto real,
  cursivas propias de la fuente, oblicuas sintetizadas y angulos ajustables antes de copiar el CSS.
  El resultado depende de las variantes disponibles en la familia tipografica.
</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-xl text-2xl leading-normal italic">
  BaselineLab permite comparar font-style con texto real,
  cursivas propias de la fuente, oblicuas sintetizadas y angulos ajustables antes de copiar el CSS.
  El resultado depende de las variantes disponibles en la familia tipografica.
</p>

CSS

.font-style-sample {
  max-inline-size: 36rem;
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
}