JavaScript에서 텍스트의 글꼴 모음(폰트 패밀리)을 설정하려면 fontFamily 속성을 사용합니다. 이 속성은 DOM 요소의 style 객체를 통해 접근할 수 있으며, CSS의 font-family 속성과 동일한 방식으로 값을 지정합니다.
기본 문법
document.getElementById("요소ID").style.fontFamily = "글꼴1, 글꼴2, sans-serif";여러 글꼴을 쉼표로 구분하여 지정하면, 첫 번째 글꼴을 사용할 수 없을 때 다음 글꼴이 대체(fallback)로 적용됩니다.
예제 코드
아래 예제는 버튼을 클릭하면 JavaScript의 fontFamily 속성을 사용해 특정 단락의 글꼴을 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p id="myID">
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
This is Demo Text. This is Demo Text. This is Demo Text. This is Demo Text.
</p>
<button type="button" onclick="display()">Set Font Family</button>
<script>
function display() {
document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
}
</script>
</body>
</html>코드 설명
- <p id="myID">: 글꼴을 변경할 대상 단락 요소입니다.
id속성으로 요소를 식별합니다. - <button onclick="display()">: 버튼 클릭 시
display()함수가 실행됩니다. - document.getElementById("myID"): ID가
myID인 요소를 가져옵니다. - style.fontFamily = "verdana, sans-serif": 해당 요소의 글꼴을 Verdana로 설정하고, Verdana를 지원하지 않는 환경에서는 기본 산세리프(sans-serif) 글꼴이 적용됩니다.
참고 사항
- 글꼴 이름에 공백이 포함된 경우(예: Times New Roman) 따옴표로 감싸는 것이 좋습니다.
예:style.fontFamily = "'Times New Roman', serif"; - 웹 폰트를 사용하는 경우 해당 폰트가 로드된 후에 적용해야 정상적으로 표시됩니다.
- 인라인 스타일뿐 아니라 CSS 클래스를 미리 정의하고
className을 변경하는 방법도 유지보수 측면에서 유용합니다.