Playground de font-stretch en CSS

Explora font-stretch con controles para probar anchuras tipográficas, keywords y porcentajes sobre texto real.

WIDTH AXIS CSS FONT STRETCH Condensed and expanded faces only appear when the selected font provides them. Compare 75%, 100%, 125% and the named width keywords before copying the CSS.

HTML

<p class="font-stretch-sample">
  WIDTH AXIS CSS FONT STRETCH
  Condensed and expanded faces only appear when the selected font provides them.
  Compare 75%, 100%, 125% and the named width keywords before copying the CSS.
</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:Avenir_Next,_Arial,_Helvetica,_sans-serif] text-3xl font-bold leading-none [font-stretch:75%]">
  WIDTH AXIS CSS FONT STRETCH
  Condensed and expanded faces only appear when the selected font provides them.
  Compare 75%, 100%, 125% and the named width keywords before copying the CSS.
</p>

CSS

.font-stretch-sample {
  max-inline-size: 42rem;
  font-family: "Avenir Next", Arial, Helvetica, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  font-stretch: 75%;
}