logo

ЦСС подебљани текст

Тхе фонт-веигхт својство у ЦСС-у се користи за подешавање тежине или дебљине фонта. Одређује колико су танки или дебели знакови у тексту. Тхе фонт-веигхт својство зависи или од тежине коју је одредио претраживач или од доступних лица фонтова у породици фонтова. Ово ЦСС својство дефинише танке до дебеле знакове.

Прихвата унапред дефинисану нумеричку вредност или вредности кључних речи. Доступне кључне речи које можемо користити са овим својством су нормално, смело, светлије и смелије . Нумеричка вредност може бити 100, 200, 300, ........., до 900. Већа нумеричка вредност представља подебљану тежину фонта од нижих нумеричких вредности.

Синтакса

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

Тхе број у горњој синтакси представља нумеричке вредности. Нумеричка вредност 400 је исто што и вредност кључне речи нормалан , и вредност 700 је исто што и вредност кључне речи одважан .

Тхе нормалан вредност стронг> дефинише нормалне знакове, а одважан вредност одређује дебеле знакове. Тхе смелије вредност представља подебљану тежину фонта, а упаљач вредност представља мању тежину фонта од тежине наслеђеног од родитеља.

Хајде да видимо како да подебљамо текст у ЦСС-у користећи илустрацију.

Увод

ЦСС је познат као моћан алат за развој веб странице. Уз помоћ овога, можемо стилизовати ХТМЛ садржај на много начина. Једно од најчешћих својстава стилизовања веб странице је коришћење својства тежине фонта. Уз помоћ подебљаног текста можемо нагласити кључне информације и визуелни контраст, а такође побољшава читљивост садржаја.

Разумевање својства тежине фонта

У ЦСС-у постоји својство Фонт-Веигхт, које се користи за дефинисање тежине или дебљине фонта. Такође одређује степен подебљаности или лакоће текста, уз прихватање веће вредности која указује на дебљи фонт. Својство фонт-веигхт прихвата различите вредности, као што су нумеричке вредности и вредности кључних речи.

Опсег нумеричких вредности је између 100 и 900, са корацима од 100. На пример, ако узмемо вредност тежине фонта као 400, онда је то нормално, док се вредност тежине фонта од 700 сматра подебљаном. Подебљано, подебљано, светлије и неке уобичајене вредности кључних речи.

Како направити подебљани текст помоћу ЦСС-а

Можемо да креирамо подебљани текст у ХТМЛ-у уз помоћ ЦСС-а. Можемо да користимо уграђена, интерна или екстерна својства стила фонта.

1. Како можемо да креирамо подебљани текст помоћу уграђеног стила

Уз помоћ уграђеног стила, можемо користити својство фонт-веигхт директно за одређени ХТМЛ елемент. Узмимо пример.

ХТМЛ код:

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

Излаз

Како подебљати текст у ЦСС-у

Објашњење:

У горњем коду смо користили инлине ЦСС и применили својство фонт-веигхт као подебљано.

2. Како можемо да креирамо подебљани текст помоћу унутрашњег стила

Овде морамо да напишемо ЦСС својство унутар ознаке хеад са ознаком стила. Узмимо пример:

ХТМЛ код:

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

Излаз

Како подебљати текст у ЦСС-у

Објашњење:

У горњем коду смо користили интерни ЦСС и применили својство фонт-веигхт.

3. Како можемо да креирамо подебљани текст помоћу спољашњег стила

Овде морамо да креирамо екстерну ЦСС датотеку и повежемо је са ХТМЛ датотеком. Унутар те ЦСС датотеке морамо написати својство стила. Узмимо пример.

ХТМЛ код:

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

ЦСС код:

 p { font-weight: bold; } 

Излаз

Како подебљати текст у ЦСС-у

Објашњење:

У горњем коду смо користили екстерно ЦСС својство и имплементирали својство фонт-веигхт.

Пример

Хајде да видимо како да направите подебљани текст у различитим нијансама користећи пример у наставку:

фибоначијев низ у јава
 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> 

Излаз

Како подебљати текст у ЦСС-у