import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";
export const title = "font-weight"; export const description = "Utilities for controlling the font weight of an element.";
<ApiTable rows={[ ["font-thin", "font-weight: 100;"], ["font-extralight", "font-weight: 200;"], ["font-light", "font-weight: 300;"], ["font-normal", "font-weight: 400;"], ["font-medium", "font-weight: 500;"], ["font-semibold", "font-weight: 600;"], ["font-bold", "font-weight: 700;"], ["font-extrabold", "font-weight: 800;"], ["font-black", "font-weight: 900;"], ["font-()", "font-weight: var();"], ["font-[]", "font-weight: ;"], ]} />
Use utilities like font-thin and font-bold to set the font weight of an element:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:font-light,font-normal,font-medium,font-semibold,font-bold] -->
<p class="font-light ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>