목차
- font 예제 - 글자 스타일 한번에 지정
- font 정의
- font 구문
- font 예제 - 글자크기 적용 O
- font 예제 - 글자크기 적용 X
- 아이폰에서 폰트사이즈 고정
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; }
div.c { 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>
결과보기
font 정의
여러 글자 속성을 한번에 지정 가능한 단축속성. (= 폰트스타일 축약속성)
1.
한번에 선언 가능한 주요 속성
font-style
font-variant
폰트변형모양 (선택값)
자세히 보기 font-weightfont-size/line-height
※ 미 선언 시, 기본값 적용
font-family
※ 미 선언 시 기본값 적용.
※ 여러 개 지정 시 ,(쉼표)로 구분하며 앞에 것이 우선 출력
2.
별도로 선언해야 하는 속성
1.
font-color (X)
CSS에선
color 속성 이용해 글자색깔 별도 선언.
즉, font {red;} , font-color{red;} 이런 건 없음
2.
font 속성 사용할 땐, 반드시 폰트 크기와 폰트 패밀리 속성값도 함께 적어야 함.
(예) {font:30px} (X) , {font:30px dotum;} (O)
만약, 글자 크기만 지정하려면, font-size 속성 이용. (예) {font-size:30px;}
3
기본값 :각 폰튼 속성들의 기본값
상속여부 : O
애니효과 : O
CSS버전 : CSS1
JS구문 : object.style.font="italic small-caps bold 12px arial,sans-serif"
4.
모든 브라우저 지원.
font 구문
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 예제 - 글자크기 적용 O
<style type="text/css">
div {font: 20px/30px dotum,sans-serif; }
</style>
<div> 홈짱닷컴 (homzzang.com) </div>
결과보기
font 예제 - 글자크기 적용 X
<style type="text/css">
div {font:30px; }
</style>
<div> 홈짱닷컴 (homzzang.com) </div>
아이폰에서 폰트사이즈 고정
(= 가로 화면에서 폰트 자동 확대 방지)
body {-webkit-text-size-adjust: 100%;}
출처: 나나티 님
