JavaScript에서 글꼴의 굵기를 설정하려면 fontWeight 속성을 사용하면 됩니다. 이 속성은 CSS의 font-weight와 동일하게 작동하며, 'normal', 'bold', 'bolder', 'lighter' 같은 키워드 값뿐만 아니라 100부터 900까지의 숫자 값도 지정할 수 있습니다. 숫자가 클수록 글자가 더 굵게 표시됩니다.
예제
아래 코드를 실행하고 버튼을 클릭하면, 해당 문단의 글꼴 모음(font-family)과 글꼴 굵기(font-weight)가 동시에 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p id="myID">
This is Demo Text.
</p>
<button type="button" onclick="display()">Set Font Family and Font Weight</button>
<script>
function display() {
document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
document.getElementById("myID").style.fontWeight = "800";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 호출되어 id가 'myID'인 문단 요소를 가져옵니다. 이후 style.fontFamily 속성으로 글꼴을 verdana(백업용 sans-serif)로 변경하고, style.fontWeight 속성을 '800'으로 설정하여 텍스트를 매우 굵게 표시합니다.
참고로 fontWeight 값으로는 100(가장 얇음), 200, 300, 400(normal), 500, 600, 700(bold), 800, 900(가장 굵음) 등을 사용할 수 있으며, 사용 중인 웹 폰트가 해당 굵기를 지원해야 정상적으로 적용됩니다.