목차
- fontFamily 예제 - 폰트 종류 설정
- fontFamily 정의
- fontFamily 구문
- fontFamily 예제 - 폰트 종류 반환
- 폰트 종류별 글자 모양 비교
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>
결과보기
