El peso de fuente La propiedad en CSS se utiliza para establecer el peso o el grosor de la fuente. Especifica qué tan finos o gruesos son los caracteres de un texto. El peso de fuente La propiedad depende de los pesos especificados por el navegador o de las fuentes disponibles en una familia de fuentes. Esta propiedad CSS define caracteres finos a gruesos.

Acepta el valor numérico predefinido o valores de palabras clave. Las palabras clave disponibles que podemos utilizar con esta propiedad son normal, atrevido, más claro y más atrevido . El valor numérico puede ser 100, 200, 300, ........., hasta 900. El valor numérico más alto representa el peso de fuente más negrita que los valores numéricos más bajos.

Sintaxis

 font-weight: normal | bold | bolder | lighter | number | initial | inherit; 

El número en la sintaxis anterior representa los valores numéricos. El valor numérico 400 es igual que el valor de la palabra clave normal , y el valor 700 es igual que el valor de la palabra clave atrevido .

hacer y mientras bucle en java

El normal El valor fuerte> define los caracteres normales y el atrevido El valor especifica los caracteres gruesos. El más audaz El valor representa el peso de fuente más negrita y el encendedor El valor representa el peso de fuente más ligero que el peso heredado del padre.

Veamos cómo poner texto en negrita en CSS usando una ilustración.

Introducción

CSS es conocido como una poderosa herramienta para el desarrollo de la página web. Con la ayuda de esto, podemos diseñar el contenido HTML de muchas maneras. Una de las propiedades más comunes al diseñar una página web es utilizar la ayuda de una propiedad de peso de fuente. Con la ayuda del texto en negrita, podemos enfatizar la información clave y el contraste visual, y también mejora la legibilidad del contenido.

Comprender la propiedad de peso de fuente

En CSS, existe una propiedad Font-Weight, que se utiliza para definir el peso o grosor de la fuente. También determina el grado de negrita o luminosidad del texto, y aceptar el valor más alto indica un peso de fuente más negrita. La propiedad font-weight acepta varios valores, como valores numéricos y de palabras clave.

El rango de valores numéricos se encuentra entre 100 y 900, con incrementos de 100. Por ejemplo, si tomamos el valor de peso de fuente como 400, entonces es normal, mientras que un valor de peso de fuente de 700 se considera negrita. Negrita, más negrita, más clara y algunos valores de palabras clave de uso común.

Cómo crear texto en negrita con CSS

Podemos crear el texto en negrita en HTML con la ayuda de CSS. Podemos utilizar propiedades de estilo de fuente en línea, internas o externas.

1. Cómo podemos crear texto en negrita con estilo en línea

Con la ayuda del estilo en línea, podemos usar la propiedad font-weight directamente en un elemento HTML específico. Tomemos un ejemplo.

Código HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Producción

Explicación:

En el código anterior, utilizamos CSS en línea y aplicamos la propiedad de peso de fuente en negrita.

2. Cómo podemos crear texto en negrita con estilo interno

Aquí tenemos que escribir la propiedad CSS dentro de la etiqueta head con la etiqueta style. Tomemos un ejemplo:

Código HTML:

 Document p { font-weight: bold; } <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Producción

Explicación:

En el código anterior, utilizamos CSS interno y aplicamos la propiedad de peso de fuente.

3. Cómo podemos crear texto en negrita con estilo externo

Aquí tenemos que crear un archivo CSS externo y vincularlo al archivo HTML. Dentro de ese archivo CSS, tenemos que escribir la propiedad de estilo. Tomemos un ejemplo.

Código HTML:

 Document <p>Welcome to javaTpoint</p> <p>This is a bold text</p> 

Código CSS:

 p { font-weight: bold; } 

Producción

Explicación:

En el código anterior, utilizamos la propiedad CSS externa e implementamos la propiedad de peso de fuente.

Ejemplo

Veamos cómo crear texto en negrita en diferentes tonos usando el siguiente ejemplo:

 p{ font-size: 20px; } <p>This font is normal.</p> <p>This font is bold.</p> <p>This font is lighter.</p> <p>This font is bolder.</p> <p>This font is 100 weight.</p> <p>This font is 200 weight.</p> <p>This font is 300 weight.</p> <p>This font is 400 weight.</p> <p>This font is 500 weight.</p> <p>This font is 600 weight.</p> <p>This font is 700 weight.</p> <p>This font is 800 weight.</p> <p>This font is 900 weight.</p> 

Producción