font-weight
En esta página
| Clase | Propiedades CSS |
|---|---|
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-(<custom-property>) |
font-weight: var(<custom-property>); |
font-[<value>] |
font-weight: <value>; |
Examples#
Basic example#
Use utilities like font-thin and font-bold to set the font weight of an element:
{
font-light
The quick brown fox jumps over the lazy dog.
font-normal
The quick brown fox jumps over the lazy dog.
font-medium
The quick brown fox jumps over the lazy dog.
font-semibold
The quick brown fox jumps over the lazy dog.
font-bold
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>