목차
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; }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-weight font-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버전 :
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%;}
출처: 나나티 님
최신댓글