The font-weight vlastnosť v CSS slúži na nastavenie hmotnosti alebo hrúbky písma. Určuje, aké tenké alebo hrubé sú znaky v texte. The font-weight vlastnosť závisí buď od váh špecifikovaných prehliadačom, alebo od dostupných plôch písma v rodine písiem. Táto vlastnosť CSS definuje tenké až hrubé znaky.

Prijíma preddefinované číselné hodnoty alebo hodnoty kľúčových slov. Dostupné kľúčové slová, ktoré môžeme použiť s touto vlastnosťou, sú normálne, tučné, svetlejšie a odvážnejšie . Číselná hodnota môže byť 100, 200, 300, ........., až 900. Vyššia číselná hodnota predstavuje hrubšiu váhu písma ako nižšie číselné hodnoty.

Syntax

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

The číslo vo vyššie uvedenej syntaxi predstavuje číselné hodnoty. Číselná hodnota 400 je rovnaká ako hodnota kľúčového slova normálne a hodnotu 700 je rovnaká ako hodnota kľúčového slova tučný .

The normálne hodnota strong> definuje normálne znaky a tučný hodnota určuje hrubé znaky. The odvážnejší hodnota predstavuje tučnejšiu váhu písma a ľahší hodnota predstavuje ľahšiu váhu písma ako je váha zdedená od rodiča.

Pozrime sa, ako použiť tučný text v CSS pomocou ilustrácie.

Úvod

CSS je známy ako výkonný nástroj na vývoj webovej stránky. Pomocou toho môžeme upravovať obsah HTML mnohými spôsobmi. Jednou z najbežnejších vlastností štýlu webovej stránky je použitie vlastnosti font-weight. Pomocou tučného textu môžeme zdôrazniť kľúčové informácie a vizuálny kontrast a tiež zlepšuje čitateľnosť obsahu.

Pochopenie vlastnosti hmotnosti písma

V CSS existuje vlastnosť Font-Weight, ktorá slúži na definovanie hmotnosti alebo hrúbky písma. Určuje tiež stupeň tučnosti alebo svetlosti textu, pričom akceptovanie vyššej hodnoty označuje tučnejšiu váhu písma. Vlastnosť font-weight akceptuje rôzne hodnoty, ako sú číselné hodnoty a hodnoty kľúčových slov.

Rozsah číselných hodnôt leží medzi 100 a 900 s prírastkami po 100. Ak napríklad vezmeme hodnotu hmotnosti písma ako 400, potom je to normálne, zatiaľ čo hodnota hmotnosti písma 700 sa považuje za tučné. Tučné, tučnejšie, svetlejšie a Niektoré bežne používané hodnoty kľúčových slov.

Ako vytvoriť tučný text pomocou CSS

Tučný text môžeme vytvoriť v HTML pomocou CSS. Môžeme použiť vložené, interné alebo externé vlastnosti štýlu písma.

1. Ako môžeme vytvoriť tučný text pomocou vloženého štýlu

Pomocou inline stylingu môžeme použiť vlastnosť font-weight priamo na konkrétny HTML prvok. Vezmime si príklad.

HTML kód:

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

Výkon

Vysvetlenie:

Vo vyššie uvedenom kóde sme použili inline CSS a použili sme vlastnosť font-weight ako tučné.

2. Ako môžeme vytvoriť tučný text s vnútorným štýlom

Tu musíme napísať vlastnosť CSS do značky head so značkou štýlu. Vezmime si príklad:

HTML kód:

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

Výkon

Vysvetlenie:

Vo vyššie uvedenom kóde sme použili interný CSS a použili vlastnosť font-weight.

3. Ako môžeme vytvoriť tučný text s externým štýlom

Tu musíme vytvoriť externý súbor CSS a prepojiť ho so súborom HTML. Do tohto súboru CSS musíme napísať vlastnosť style. Vezmime si príklad.

HTML kód:

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

CSS kód:

 p { font-weight: bold; }  

Výkon

Vysvetlenie:

Vo vyššie uvedenom kóde sme použili externú vlastnosť CSS a implementovali vlastnosť font-weight.

Príklad

Pozrime sa, ako vytvoriť tučný text v rôznych odtieňoch pomocou nižšie uvedeného príkladu:

 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>  

Výkon