El pes del tipus de lletra La propietat en CSS s'utilitza per establir el pes o el gruix del tipus de lletra. Especifica com de fins o gruixuts són els caràcters d'un text. El pes del tipus de lletra La propietat depèn dels pesos especificats pel navegador o de les fonts de lletra disponibles en una família de tipus de lletra. Aquesta propietat CSS defineix caràcters prims a gruixuts.

Accepta el valor numèric predefinit o valors de paraula clau. Les paraules clau disponibles que podem utilitzar amb aquesta propietat són normal, atrevit, més lleuger i més atrevit . El valor numèric pot ser 100, 200, 300, ......... fins a 900. El valor numèric més alt representa el pes de lletra més negret que els valors numèrics més baixos.

Sintaxi

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

El nombre a la sintaxi anterior representa els valors numèrics. El valor numèric 400 és el mateix que el valor de la paraula clau normal , i el valor 700 és el mateix que el valor de la paraula clau agosarat .

El normal strong> value defineix els caràcters normals i el agosarat value especifica els caràcters gruixuts. El més agosarat El valor representa el pes de lletra més negret i el més lleuger El valor representa el pes de lletra més lleuger que el pes heretat del pare.

Vegem com posar text en negreta en CSS mitjançant una il·lustració.

Introducció

CSS és conegut com una eina poderosa per al desenvolupament de la pàgina web. Amb l'ajuda d'això, podem estilitzar el contingut HTML de moltes maneres. Una de les propietats més comunes de l'estil de la pàgina web és utilitzar l'ajuda d'una propietat de pes de lletra. Amb l'ajuda del text en negreta, podem emfatitzar la informació clau i el contrast visual, i també millora la llegibilitat del contingut.

Comprensió de la propietat de pes de font

En CSS, hi ha una propietat Font-Weight, que s'utilitza per definir el pes o el gruix del tipus de lletra. També determina el grau d'audacia o lleugeresa del text, amb l'acceptació del valor més alt indicant un pes de lletra més negre. La propietat font-weight accepta diversos valors, com ara valors numèrics i de paraula clau.

L'interval de valors numèrics es troba entre 100 i 900, amb increments de 100. Per exemple, si prenem el valor del pes del tipus de lletra com a 400, és normal, mentre que un valor del pes del tipus de lletra de 700 es considera en negreta. Negreta, més atrevida, més clara i alguns valors de paraula clau d'ús habitual.

Com crear text en negreta amb CSS

Podem crear el text en negreta en HTML amb l'ajuda de CSS. Podem utilitzar propietats d'estil de lletra en línia, internes o externes.

1. Com podem crear el text en negreta amb l'estil en línia

Amb l'ajuda de l'estil en línia, podem utilitzar la propietat font-weight directament a un element HTML específic. Prenguem un exemple.

codi HTML:

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

Sortida

Explicació:

Al codi anterior, hem utilitzat el CSS en línia i hem aplicat la propietat font-weight com a negreta.

2. Com podem crear text en negreta amb estil intern

Aquí, hem d'escriure la propietat CSS dins de l'etiqueta head amb l'etiqueta style. Posem un exemple:

codi HTML:

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

Sortida

Explicació:

Al codi anterior, hem utilitzat CSS intern i hem aplicat la propietat font-weight.

3. Com podem crear text en negreta amb un estil extern

Aquí, hem de crear un fitxer CSS extern i enllaçar-lo amb el fitxer HTML. Dins d'aquest fitxer CSS, hem d'escriure la propietat d'estil. Prenguem un exemple.

codi HTML:

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

Codi CSS:

algorismes d'ordenació

 p { font-weight: bold; } 

Sortida

Explicació:

Al codi anterior, hem utilitzat la propietat CSS externa i hem implementat la propietat font-weight.

Exemple

Vegem com crear text en negreta amb diferents tons utilitzant l'exemple següent:

 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> 

Sortida