JavaScript에서 글꼴 스타일을 설정하려면 fontStyle 속성을 사용합니다. 이 속성에는 세 가지 값을 지정할 수 있습니다.
- normal — 기본값으로, 기울어지지 않은 일반적인 글꼴 스타일입니다.
- italic — 해당 글꼴에 기울임꼴 버전이 있으면 그것을 사용합니다.
- oblique — 일반 글꼴을 단순히 기울여 표시한 사선 형태입니다.
아래 예제 코드를 실행하면 버튼 클릭 시 지정된 문단의 글꼴 모음(fontFamily)과 함께 글꼴 스타일을 italic으로 변경할 수 있습니다.
예제
<!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 and Style</button>
<script>
function display() {
document.getElementById("myID").style.fontFamily = "verdana,sans-serif";
document.getElementById("myID").style.fontStyle = "italic";
}
</script>
</body>
</html>코드 설명
버튼을 클릭하면 display() 함수가 호출되고, document.getElementById()로 id가 myID인 문단 요소를 가져옵니다. 이후 style.fontFamily에 verdana,sans-serif를 할당해 글꼴 모음을 변경하고, style.fontStyle에 italic을 할당하여 텍스트가 기울임꼴로 표시됩니다.
italic과 oblique의 차이점
italic은 글꼴 디자이너가 별도로 제작한 기울임 서체를 적용하는 반면, oblique는 일반 서체를 기울기 변형만으로 만든 것입니다. 대부분의 브라우저에서 두 값은 비슷하게 렌더링되지만, 원래 의미상으로는 italic이 더 정식적인 기울임꼴입니다. 일반 상태로 되돌리려면 fontStyle 속성에 normal 값을 지정하면 됩니다.