본문으로 건너뛰기

Font Weight (font-weight), Font Style (font-style)

Font Weight (font-weight), Font Style (font-style)

When writing, to emphasize certain parts or to give a special feeling, you might press harder with a pen or use cursive writing.

In CSS, the font-weight property is used to change the weight of the text, and the font-style property is used to change the style.


  1. font-weight

The font-weight property adjusts the thickness of the text. Just like adjusting the pressure of a ballpoint pen, it allows you to make the text thicker or maintain normal thickness.

The thickness of the text can be specified using keyword values (normal, semi-bold, bold...) and numerical values (300, 400, 500...).

CSS
.normal-text {
font-weight: normal; /* Normal thickness text, can also be set to 400 */
}

.bold-text {
font-weight: bold; /* Thick text, can also be set to 700 */
}

.thicker-text {
font-weight: 400;
}

Numerical values and keywords can be applied differently depending on the font.

For example, bold can be applied as 700 in some fonts, while in others it might be applied as 600.


  1. font-style

The font-style property changes the style of the text.

normal is for standard text style, while italic gives a slanted, cursive-like appearance to the font.

Example code:

CSS
.regular-text {
font-style: normal; /* Standard text style */
}

.italic-text {
font-style: italic; /* Slanted, cursive-like text */
}

If you use a font that does not support italic style, the font-style: italic property will not be applied.


Follow the asterisk-highlighted part of the code to try inputting it.