Propiedad CSS font-weight
La propiedad font-weight se utiliza para establecer el grosor (o negrita) de una fuente. Algunas fuentes solo admiten pesos normal y bold.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | Sí. |
| Animable | Sí. |
| Versión | CSS1 |
| Sintaxis DOM | object.style.fontWeight = "bolder"; |
Sintaxis
Sintaxis de la propiedad CSS font-weight
css
font-weight: normal | bold | bolder | lighter | number | initial | inherit;Ejemplo de la propiedad font-weight:
Ejemplo de la propiedad CSS font-weight con el valor bolder
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="bolder">We used a bolder text here.</p>
</body>
</html>Resultado
Ejemplo de la propiedad font-weight con todos los valores:
Ejemplo de la propiedad CSS font-weight con los valores normal, lighter, bold, bolder y numérico
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
p.fweight {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="normal">We used normal weight here.</p>
<p class="lighter">This is a lighter weight.</p>
<p class="bold">We used bold weight here.</p>
<p class="bolder">We used a bolder text here.</p>
<p class="fweight">We set font-weight 600 here.</p>
</body>
</html>Valores
| Valor | Descripción | Probar » |
|---|---|---|
| normal | Especifica el peso normal. Este es el valor predeterminado. | Probar » |
| bold | Especifica un peso negrita (equivalente a 700). | Probar » |
| bolder | Especifica un peso un nivel más grueso que el valor calculado del elemento padre. | Probar » |
| lighter | Especifica un peso un nivel más fino que el valor calculado del elemento padre. | Probar » |
| 100 200 300 400 500 600 700 800 900 | Establece un peso numérico desde fino (100) hasta negrita (900). 400 es equivalente a normal, y 700 es equivalente a bold. | Probar » |
| initial | Establece la propiedad en su valor predeterminado. | Probar » |
| inherit | Hereda la propiedad del elemento padre. |
Practice
¿Qué propiedades especifica la propiedad CSS 'font-weight'?