CSS 글꼴 속성을 사용하면 텍스트 모양을 수정할 수 있습니다. 다음 속성은 텍스트 스타일을 지정하는 데 도움이 됩니다.
글꼴군
이 속성은 요소의 글꼴을 설정하는 데 사용됩니다.
글꼴 커닝
글자 간격을 균일하게 하고 가독성을 높이기 위해 font-kerning 속성을 사용합니다. 그러나 이 속성은 글꼴에 따라 다릅니다.
글꼴 크기
font-size 속성은 글꼴의 크기를 설정합니다.
글꼴 늘이기
일부 글꼴에는 condensed, bold 등과 같은 추가 면이 있습니다. 이를 지정하는 데 font-stretch 속성이 사용됩니다.
글꼴 스타일
텍스트를 각도로 기울임꼴로 표시하려면 font-style 속성을 사용합니다.
글꼴 변형
font-variant를 사용하면 요소를 작은 대문자로 표시할지 여부를 지정할 수 있습니다.
글꼴 두께
글자의 굵기는 font-weight 속성에 의해 지정됩니다.
위의 모든 속성의 약어인 font 속성을 사용할 수도 있습니다.
구문
글꼴 속성의 구문은 다음과 같습니다 -
Selector {
font: /*value*/
} 다음 예는 CSS 글꼴 속성을 보여줍니다 -
예시
<!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> 출력
이것은 다음 출력을 제공합니다 -
예시
<!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> 출력
이것은 다음 출력을 제공합니다 -
