De teckensnittsvikt egenskap i CSS används för att ställa in vikten eller tjockleken på teckensnittet. Den anger hur tunna eller tjocka tecknen i en text. De teckensnittsvikt egenskapen är antingen beroende av vikterna som anges av webbläsaren eller de tillgängliga teckensnitten i en teckensnittsfamilj. Denna CSS-egenskap definierar tunna till tjocka tecken.

Den accepterar det fördefinierade numeriska värdet eller nyckelordsvärdena. De tillgängliga sökorden som vi kan använda med den här egenskapen är normal, fet, ljusare och djärvare . Det numeriska värdet kan vara 100, 200, 300, .........., upp till 900. Det högre numeriska värdet representerar den fetare teckensnittsvikten än de lägre numeriska värdena.

Syntax

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

De siffra i ovanstående syntax representerar de numeriska värdena. Det numeriska värdet 400 är samma som sökordsvärdet vanligt , och värdet 700 är samma som sökordsvärdet djärv .

De vanligt strong>-värdet definierar de normala tecknen och djärv värde anger de tjocka tecknen. De djärvare värdet representerar den fetare teckensnittets vikt och lättare värde representerar den lättare teckensnittsvikten än vikten som ärvts från föräldern.

Låt oss se hur man fet text i CSS med hjälp av en illustration.

fibonacci-sekvens java

Introduktion

CSS är känt som ett kraftfullt verktyg för utveckling av webbsidan. Med hjälp av detta kan vi styla HTML-innehållet på så många sätt. En av de vanligaste egenskaperna för att styla webbsidan är att använda hjälp av en egenskap med teckensnittsvikt. Med hjälp av fet text kan vi betona nyckelinformationen och den visuella kontrasten, och det förbättrar även innehållets läsbarhet.

Förstå Font-Weight Property

I CSS finns det en Font-Weight-egenskap, som används för att definiera teckensnittets vikt eller tjocklek. Det bestämmer också graden av textens fethet eller ljushet, med att acceptera det högre värdet som indikerar en fetare teckensnittsvikt. Egenskapen font-weight accepterar olika värden, såsom numeriska och nyckelordsvärden.

Omfånget av numeriska värden ligger mellan 100 och 900, med steg om 100. Om vi ​​till exempel tar teckensnittets viktvärde som 400 är det normalt, medan ett teckensnittsviktsvärde på 700 anses vara fetstilt. Fet, djärvare, ljusare och Några vanliga sökordsvärden.

Hur man skapar fet text med CSS

Vi kan skapa den fetstilta texten i HTML med hjälp av CSS. Vi kan använda inline, interna eller externa teckensnittsegenskaper.

1. Hur vi kan skapa fet text med inline styling

Med hjälp av inline-styling kan vi använda egenskapen font-weight direkt till ett specifikt HTML-element. Låt oss ta ett exempel.

multiline kommentar powershell

HTML-kod:

regexp_like i mysql

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

Produktion

Förklaring:

I ovanstående kod använde vi inline CSS och använde egenskapen font-weight som fetstil.

2. Hur vi kan skapa fet text med intern styling

Här måste vi skriva CSS-egenskapen inuti head-taggen med stiltaggen. Låt oss ta ett exempel:

HTML-kod:

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

Produktion

Förklaring:

I ovanstående kod har vi använt intern CSS och tillämpat egenskapen font-weight.

hur många städer finns i USA

3. Hur vi kan skapa fet text med extern styling

Här måste vi skapa en extern CSS-fil och länka den till HTML-filen. Inuti den CSS-filen måste vi skriva stilegenskapen. Låt oss ta ett exempel.

HTML-kod:

sträng java ersätt

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

CSS-kod:

 p { font-weight: bold; } 

Produktion

Förklaring:

I ovanstående kod har vi använt den externa CSS-egenskapen och implementerat egenskapen font-weight.

Exempel

Låt oss se hur du skapar fet text i olika nyanser genom att använda exemplet nedan:

 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> 

Produktion