Sabemos que en HTML tenemos etiquetas <b> y <strong> para poner el contenido en negrita. Cuando se trata de poner un texto en negrita usando CSS, también tenemos una propiedad apropiada para hacer lo mismo.
Usaremos la propiedad font-weight de CSS para poner el contenido en negrita. Tenemos una variedad de opciones para establecer el nivel de grosor de nuestro texto.
- normal : Es el peso de fuente normal. Es lo mismo que 400, el valor numérico predeterminado para la negrita.
- negrita : Es el peso de la fuente en negrita. Es lo mismo que 700.
- bolder : Establece el font-weight más negrita que el elemento principal.
- más ligero: establece el peso de la fuente más ligero que el elemento principal
- <número>: un valor de <número> entre 1 y 1000, inclusive (en orden creciente del nivel de negrita).
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 1: El siguiente ejemplo muestra un texto simple que está representado en negrita usando la propiedad font-weight de CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2 {
font-weight: 700;
color: green;
}
.text {
font-weight: bold;
}
</style>
</head>
<body>
<h2>
Welcome To Geeks for Geeks
</h2>
<p class="text">
A Computer Science portal for geeks
</p>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra algunos textos simples representados usando otras propiedades de peso de fuente.
HTML
<!DOCTYPE html> <html> <body> <h2 style="font-weight: bold; text-decoration: underline;"> Thought of the day </h2> <p style="font-weight: lighter;"> A good programmer is someone who always look both ways <span style="font-weight: 900;"> before crossing the one way road. </span> </p> </body> </html>
Producción:
propiedad de peso de fuente
Navegador compatible:
- Google Chrome 2.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.3
Publicación traducida automáticamente
Artículo escrito por prakhargupta24 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA