font 예제
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<style>
div.a { font : 20px arial , sans-serif;
div.b { font : italic bold 20px/30px Georgia , serif;font : 700 20px/40px 'Josefin Sans ', sans-serif;
</style>
<div class="a">홈짱닷컴 Homzzang.com</div>
<div class="b">홈짱닷컴 Homzzang.com</div>
<div class="c">홈짱닷컴 Homzzang.com</div>결과보기
여러 글자 속성을 한번에 지정 가능한 단축속성 (= 폰트스타일 축약속성)
1.
한번에 선언 가능한 주요 속성
font-style
font-variant
폰트변형모양 (선택값)
자세히 보기 font-weight font-size/line-height
※ 미 선언 시, 기본값 적용
font-family
※ 미 선언 시 기본값 적용.
※ 여러 개 지정 시 ,(쉼표)로 구분하며 앞에 것이 우선 출력
2.
별도로 선언해야 하는 속성
1.
font-color (X)
CSS에선 color 속성 이용해 글자색깔 별도 선언.
2.
font-face (X) font-family 속성 이용해 폰트종류 선언
font 속성 사용할 땐, 반드시 폰트 크기와 폰트 패밀리 속성값도 함께 적어야 함.
(예) {font:30px} (X) , {font:30px dotum;} (O)
만약, 글자 크기만 지정하려면, font-size 속성 이용. (예) {font-size:30px;}
3.
기본값 :
상속여부 : O
애니효과 : O
CSS버전 :
JS구문 : object.style.font ="italic small-caps bold 12px arial,sans-serif"
4.
IE4 이상 모든 브라우저 지원.
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
[속성값]
폰트굵기. (기본값: "normal")
폰트크기/라인높이 (기본값: "normal")
폰트패밀리. (기본값: 브라우저에 좌우)
caption
캡션 컨트롤 (예 : button, drop-down 등)에 사용되는 글꼴 사용.
icon
아이콘 레이블에 사용되는 글꼴을 사용.
menu
message-box
대화 상자에서 사용하는 글꼴을 사용.
small-caption
작은 버전의 캡션 글꼴
status-bar
initial
inherit
font 예제 - 글자크기가 적용되는 예제
<style type="text/css">
div {font : 20px/30px dotum,sans-serif;
</style>
<div> 홈짱닷컴 (homzzang.com) </div>
결과보기
font 예제 - 글자크기가 적용 안되는 예제
<style type="text/css">
div {font :30px; }
</style>
<div> 홈짱닷컴 (homzzang.com) </div>
아이폰 에서 폰트사이즈 고정시키는 방법
body {-webkit-text-size-adjust : 100%;}
출처: 나나티 님
