CSS font-style 속성

font-style 속성은 대부분 기울임꼴 텍스트를 지정하는 데 사용된다.

이 속성에는 세 가지 값이 있다:

normal - 텍스트가 정상적으로 표시됩니다
italic - 텍스트가 기울임꼴로 표시됩니다
oblique - 텍스트가 "편향"입니다(사선은 기울어짐). 이탤릭체와 비슷하지만 덜 지원됨)

CSS font-weight 속성

font-weight 속성은 글꼴의 가중치를 지정한다:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>
</head>
<body>

<h1>font-weight 속성</h1>

<p class="normal">font-weight normal.</p>
<p class="light">font-weight lighter.</p>
<p class="thick">font-weight bold.</p>
<p class="thicker">font-weight 900.</p>

</body>
</html>

CSS font-weight 속성값에 normal, lighter, bold, 900값을 설정하였을 경우 아래 그림과 같이 화면에 출력이 된다.

CSS font-varient 속성

font-varient 속성은 텍스트를 작은 대문자로 표시할지 여부를 지정한다.

작은 대문자 글꼴에서는 모든 소문자가 대문자로 변환된다. 그러나 변환된 대문자는 텍스트의 원래 대문자보다 작은 글꼴 크기로 나타난다.

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}
</style>
</head>
<body>

<h1>font-variant 속성</h1>

<p class="normal">font-varient 속성 : normal.</p>
<p class="small">font-varient 속성 : small-caps.</p>

</body>
</html>

CSS font-varient 속성값에 normal과 small-caps 값을 설정하였을 경우, 출력되는 화면은 아래 그림과 같다.

small-cpas로 설정하면 영문은 대문자로 변환되고 크기는 원래 대문자 크기보다 작게 출력되는 것을 확인할 수 있다.

지금까지 font-weight와 font-varient 속성값에 대한 개념과 실습을 간단히 살펴보았다.

반드시 꼭 실습하기를 추천합니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS google fonts (0)	2023.08.08
CSS font-size 속성 (0)	2023.08.07
CSS 예비 폰트 (0)	2023.08.05
CSS 웹 안전 폰트 (0)	2023.08.04
CSS font-family (0)	2023.08.03

enjoyCoding

CSS font-style 속성