HTML DOM 스타일 글꼴 속성은 font-style, font-variant, font-weight, font-size, line-height 및 font-family라는 6가지 속성을 설정하거나 가져오는 데 사용됩니다. 글꼴 크기와 글꼴 패밀리는 필수 속성 값이며 다른 모든 누락된 값에 대해 기본값을 설정할 수 있습니다.
다음은 글꼴 속성을 반환하는 구문입니다 -
object.style.font
글꼴 속성 설정 -
| 값 | 설명 |
|---|---|
| 스타일 | 글꼴 스타일을 초기화합니다. |
| 변형 | 소문자 글꼴로 텍스트를 초기화합니다. |
| 무게 | 글꼴의 굵기를 지정합니다. |
| 크기 | 글꼴 크기를 지정합니다. |
| 줄 높이 | 줄 사이의 거리를 지정합니다. |
| 패밀리 | 글꼴을 초기화합니다. |
| 캡션 | 캡션 컨트롤에 글꼴을 적용합니다. 예:버튼, 드롭다운 등 |
| 아이콘 | 라벨 아이콘 글꼴을 지정합니다. |
| 메뉴 | 메뉴에 사용되는 글꼴 |
| 메시지 상자 | 대화 상자에 사용된 글꼴 |
| 작은 캡션 | 작은 컨트롤에 사용되는 글꼴 |
| 상태 표시줄 | 창 상태 표시줄 글꼴을 현재 글꼴로 설정합니다. |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속합니다. |
font 속성에 대한 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
.PARA1{
font: oblique 5deg small-caps bold 1.3em/3 cursive;
}
</style>
<script>
function changeFont() {
for(var i=0;i<2;i++){
document.getElementsByClassName("PARA1")[i].style.font="italic bold 30px Verdana ";
}
document.getElementById("Sample").innerHTML="The text in the above two paragraphs is now changed";
}
</script>
</head>
<body>
<p class="PARA1">This is demo text</p>
<p class="PARA1">This is another demo text</p>
<p>Change the above container div flex direction by clicking the below button</p>
<button onclick="changeFont()">Change Font</button>
<p id="Sample"></p>
</body>
</html> 출력
"글꼴 변경을 클릭하면 " 버튼 -
"글꼴 변경을 클릭하면 " 버튼 -
