HTML DOM의 Style font 속성은 font-style, font-variant, font-weight, font-size, line-height, font-family 여섯 가지 글꼴 관련 하위 속성을 한 번에 설정하거나 조회할 때 사용됩니다. 이 중 글꼴 크기(font-size)와 글꼴 종류(font-family)는 반드시 지정해야 하는 필수 값이며, 생략된 나머지 값들은 기본값으로 자동 적용됩니다.
font 속성 값을 반환하는 문법
object.style.font
font 속성 설정에 사용할 수 있는 값
| 값 | 설명 |
|---|---|
| style | 글꼴 스타일(기울임 등)을 설정합니다. |
| variant | 텍스트를 small-caps(작은 대문자) 글꼴로 표시합니다. |
| weight | 글꼴의 굵기를 지정합니다. |
| size | 글꼴 크기를 지정합니다. |
| lineHeight | 줄과 줄 사이의 간격(행간)을 지정합니다. |
| family | 글꼴 모양(face)을 설정합니다. |
| caption | 버튼, 드롭다운 등 캡션 컨트롤에 사용되는 글꼴을 적용합니다. |
| icon | 아이콘 레이블에 사용되는 글꼴을 지정합니다. |
| menu | 메뉴에서 사용되는 글꼴입니다. |
| message-box | 대화상자(dialog box)에서 사용되는 글꼴입니다. |
| small-caption | 작은 크기의 컨트롤에 사용되는 글꼴입니다. |
| status-bar | 창 상태 표시줄(status bar)의 글꼴을 현재 글꼴로 설정합니다. |
| initial | 이 속성을 기본 초기값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
그럼 실제 예제를 통해 font 속성이 어떻게 동작하는지 살펴보겠습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.PARA1{
font: oblique 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="위 두 단락의 글꼴이 변경되었습니다";
}
</script>
</head>
<body>
<p class="PARA1">This is demo text</p>
<p class="PARA1">This is another demo text</p>
<p>아래 버튼을 클릭하면 위 두 단락의 글꼴이 변경됩니다</p>
<button onclick="changeFont()">Change Font</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지를 처음 열면 CSS에서 지정한 대로 두 단락이 필기체(cursive) 계열의 작은 대문자, 굵은 글씨로 표시됩니다.
여기서 "Change Font" 버튼을 클릭하면 JavaScript의 changeFont() 함수가 실행되어 두 단락의 글꼴이 italic bold 30px Verdana로 한 번에 변경됩니다.
버튼 클릭 후의 최종 결과 화면은 다음과 같습니다.
