[DOM_Style] JS - fontFamily 속성 ★ - 폰트 종류 설정/반환. (= 글꼴 종류 = fontFamily속성 = 폰트패밀리속성)

목차

1. fontFamily 예제 - 폰트 종류 설정
2. fontFamily 정의
3. fontFamily 구문
4. fontFamily 예제 - 폰트 종류 반환
5. 폰트 종류별 글자 모양 비교

fontFamily 예제 - 폰트 종류 설정

 

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  document.getElementById("hz").style.fontFamily = "Verdana, sans-serif";

}

</script>

 

결과보기

fontFamily 정의

 

요소 텍스트의 폰트 (font-family, generic-family) 반환/설정.

 

---

 

1.

브라우저는 여러 나열된 값 중 인식하는 첫 번째 값을 사용함.

 

2.

CSS font-family 속성의 속성값 유형 2가지.

※ font-family 값 예제: verdana, arial, dotum...등.
※ generic-family 값 예제: serif, sans-serif 등.

 

3.

generic-family 속성값은 항상 마지막 대안으로 지정.

 

4.

각 값은 쉼표( , )로 구분.

 

5.

font-family 속성값 이름에 공백 포함 시 따옴표로 묶어야 함.

(예제) 'Trebuchet MS', 'Times New Roman'

 

6.

Web 권장 영문 폰트 종류. (예제보기)

Arial (sans-serif)

Verdana (sans-serif)

Helvetica (sans-serif)

Tahoma (sans-serif)

Trebuchet MS (sans-serif)

Times New Roman (serif)

Georgia (serif)

Garamond (serif)

Courier New (monospace)

Brush Script MT (cursive)

7.

모든 브라우저 지원.

 

fontFamily 구문

 

폰트 종류 반환. (※ 주의: 인라인스타일 방식만 지원.)

object.style.fontFamily

 

폰트 종류 설정.

object.style.fontFamily = "font1, font2, etc.|initial|inherit"

 

---

[속성값]

 

font1, font2, etc.

콤마( , )로 구분 나열된 폰트패밀리 속성값 종류.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소의 속성값 상속.

 

fontFamily 예제 - 폰트 종류 반환

 

<button onclick="homzzang()">클릭</button>

<div id="hz" style="font-family:Verdana, sans-serif;">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  var x = document.getElementById("hz").style.fontFamily;

  alert(x);

}

</script>

 

결과보기

---

PS1. 주의: 내부스타일 경우엔 반환 안 됨.

 

<style>

#hz {font-faimly:verdana, sans-serif;}

</style>

 

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  document.getElementById("hz").style.fontFamily;

}

</script>

 

결과보기

---

PS2. 내부스타일 경우, 아래 방법으로 반환 가능.

 

<style>

#hz {font-family:Verdana, sans-serif;}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

    var hz = document.getElementById("hz");

    var x = getComputedStyle(hz).getPropertyValue("font-family");

  alert(x);

}

</script>

 

결과보기

---

PS3. jQuery의 css() 메서드 이용 시, 스타일 방식 상관없이 반환 가능.

<script src="http://code.jquery.com/jquery-latest.js"></script>

<style>

#hz {font-family:Verdana, sans-serif;}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

  var x = $("#hz").css("font-family");

  alert(x);

}

</script>

 

결과보기 

사노라가노라 님, 균이 님 (210511) https://sir.kr/qa/412207

폰트 종류별 글자 모양 비교

 

<style>.Arial {font-family: Arial, sans-serif;}</style>

<h1 class="Arial">홈짱닷컴 Homzzang.com</h1>

<p class="Arial">홈짱닷컴 Homzzang.com</p>

<p class="Arial">0 1 2 3 4 5 6 7 8 9</p>

<style>.Verdana {font-family: Verdana, sans-serif;}</style>

<h1 class="Verdana">홈짱닷컴 Homzzang.com</h1>

<p class="Verdana">홈짱닷컴 Homzzang.com</p>

<p class="Verdana">0 1 2 3 4 5 6 7 8 9</p>

<style>.Helvetica {font-family: Helvetica, sans-serif;}</style>

<h1 class="Helvetica">홈짱닷컴 Homzzang.com</h1>

<p class="Helvetica">홈짱닷컴 Homzzang.com</p>

<p class="Helvetica">0 1 2 3 4 5 6 7 8 9</p>

<style>.Tahoma {font-family: Tahoma, sans-serif;}</style>

<h1 class="Tahoma">홈짱닷컴 Homzzang.com</h1>

<p class="Tahoma">홈짱닷컴 Homzzang.com</p>

<p class="Tahoma">0 1 2 3 4 5 6 7 8 9</p>

<style>.Trebuchet {font-family: 'Trebuchet MS', sans-serif;}</style>

<h1 class="Trebuchet">홈짱닷컴 Homzzang.com</h1>

<p class="Trebuchet">홈짱닷컴 Homzzang.com</p>

<p class="Trebuchet">0 1 2 3 4 5 6 7 8 9</p>

 

결과보기