La propiedad font-weight del CSS se usa para establecer el peso o el grosor de la fuente que se usa con el texto HTML. El peso de fuente aplicado dependerá de la familia de fuentes utilizada y del navegador . Por ejemplo, algunas familias de fuentes solo están disponibles en pesos específicos.
Sintaxis:
font-weight: normal|bold|lighter|bolder|number|initial|inherit|unset;
Valores de propiedad :
- normal: este es el peso de fuente predeterminado y define el peso de fuente normal. Es igual al valor numérico 400 .
- negrita: Esto define el peso de la fuente en negrita, es igual al valor numérico 700 .
- más ligero: esto hace que el peso de la fuente sea un nivel más ligero que el elemento principal, teniendo en cuenta los pesos de fuente disponibles de la familia de fuentes.
- negrita: esto hace que el peso de la fuente sea un nivel más pesado que el elemento principal, teniendo en cuenta los pesos de fuente disponibles de la familia de fuentes.
- número: Esto establece el peso de la fuente de acuerdo con el número especificado. El número puede oscilar entre 1 y 1000 . Si no se dispone del peso exacto, se aplica un peso adecuado.
Valores globales :
- initial: Esto establece el peso de la fuente en el valor inicial (predeterminado).
- heredar: Esto establece el peso de la fuente igual al valor heredado de su elemento principal.
- unset: Esto establece el peso de la fuente igual al valor heredado de su elemento principal, ya que el peso de la fuente es una propiedad heredable .
Cuando se especifica más claro o más negrita, el siguiente gráfico muestra cómo se determina el peso de fuente absoluto del elemento.
Valor principal |
encendedor |
más audaz |
|---|---|---|
|
100 |
100 |
400 |
|
200 |
100 |
400 |
|
300 |
100 |
400 |
|
400 |
100 |
700 |
|
500 |
100 |
700 |
|
600 |
400 |
900 |
|
700 |
400 |
900 |
|
800 |
700 |
900 |
|
900 |
700 |
900 |
Ejemplo : el siguiente ejemplo demuestra el uso de la propiedad CSS font-weight en la que la propiedad se ha establecido en diferentes valores.
HTML
<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<!-- font-weight CSS property -->
<style>
body {
font-weight: bold;
font-family: sans-serif;
}
p.one {
font-weight: bold;
}
p.two {
font-weight: lighter;
}
p.three {
font-weight: 1000;
}
p.four {
font-weight: initial;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>CSS font-weight Property</h3>
<!-- font-weight: bold; length; property -->
<p class="one">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course.
The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>
<!-- font-weight: lighter; length; property -->
<p class="two">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course. The course
focuses on various MCQ's & Coding question likely to
be asked in the interviews & make your upcoming
placement season efficient and successful.
</p>
<!-- font-weight: 1000; length; property -->
<p class="three">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with
a free online placement preparation course. The
course focuses on various MCQ's & Coding question
likely to be asked in the interviews & make your
upcoming placement season efficient and successful.
</p>
<!-- font-weight: initial; length; property -->
<p class="four">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course. The course
focuses on various MCQ's & Coding question likely to
be asked in the interviews & make your upcoming
placement season efficient and successful.
</p>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad CSS font-weight se enumeran a continuación:
- Google Chrome 2.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Safari 1.0
- Ópera 3.5