CSS 글꼴(font) 속성을 활용하면 웹 페이지의 텍스트 모양을 자유롭게 꾸밀 수 있습니다. 아래에서 소개하는 속성들을 사용하면 글꼴 종류, 크기, 굵기, 기울임 등 다양한 텍스트 스타일을 손쉽게 적용할 수 있습니다.
주요 CSS 글꼴 속성
font-family
요소에 적용할 글꼴(서체)을 지정하는 속성입니다.
font-kerning
문자 간격을 균일하게 조정하여 가독성을 높이는 데 사용됩니다. 단, 이 속성은 글꼴마다 지원 여부가 다르다는 점에 유의해야 합니다.
font-size
글꼴의 크기를 지정합니다.
font-stretch
일부 글꼴은 condensed(축약형), bold 등의 추가 서체 형태를 제공합니다. font-stretch 속성을 사용하면 이러한 형태를 지정할 수 있습니다.
font-style
텍스트를 기울임꼴로 표시할 때 사용하며, normal / italic / oblique 값을 지원합니다.
font-variant
요소를 small-caps(작은 대문자) 형태로 표시할지 여부를 지정합니다.
font-weight
글자의 굵기를 지정합니다.
또한 위 속성들을 한 번에 설정할 수 있는 font 단축(shorthand) 속성도 함께 사용할 수 있습니다.
문법(Syntax)
font 속성의 기본 문법은 다음과 같습니다 −
Selector {
font: /*value*/
}아래 예제들을 통해 CSS font 속성의 실제 사용 방법을 살펴보겠습니다.
예제 1: font-style로 텍스트 기울이기
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 3px;
float: left;
font-family: "Matura MT Script Capitals";
font-size: 200%;
}
#a {
font-style: normal;
}
#b {
font-style: italic;
}
#c {
font-style: oblique 40deg;
font-family: "Harlow Solid Italic";
}
</style>
</head>
<body>
<div id="a">Normal Demo</div>
<div id="b">Italic Demo</div>
<div id="c">Oblique Demo</div>
</body>
</html>실행 결과
위 코드는 다음과 같은 결과를 출력합니다 −
예제 2: 목록 항목에 다양한 글꼴 적용하기
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-size: 1.1em;
list-style: circle;
}
li:first-child {
background-color: seashell;
font-family: cursive;
}
li:nth-child(2) {
background-color: azure;
font-family: "Brush Script Std", serif;
}
li:last-child {
background-color: springgreen;
font-family: "Gigi", Arial;
}
</style>
</head>
<body>
<h2>Learning Scala</h2>
<ul>
<li>Scala is a pure object-oriented language in the sense that every value is an object.</li>
<li>Scala is compiled into Java Byte Code which is executed by the Java Virtual Machine (JVM).</li>
<li>Scala provides a lightweight syntax for defining anonymous functions</li>
</ul>
</body>
</html>실행 결과
위 코드는 다음과 같은 결과를 출력합니다 −
