• Q&A
  • 회원가입
  • 로그인

[font] CSS - font 속성 ★ - 글자스타일종합 (= font속성 = 글씨체 = 서체 = 글꼴 = 폰트속성, 상속O)



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-weight
폰트굵기 (선택값)  자세히 보기

font-size/line-height
필수. 폰트 크기 /라인 높이  자세히 보기  ,  자세히 보기
※ 미 선언 시, 기본값 적용
 
font-family
필수. 폰트 종류 -  자세히 보기
※ 미 선언 시 기본값 적용.
※ 여러 개 지정 시 ,(쉼표)로 구분하며 앞에 것이 우선 출력

 


 
2.
별도로 선언해야 하는 속성
 
1.
font-color (X)
CSS에선 color 속성 이용해 글자색깔 별도 선언.
즉, font {red;} , font-color{red;} 이런 건 없음
 
2.
font-face (X)
CSS에선 font-family 속성 이용해 폰트종류 선언

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.

IE4 이상 모든 브라우저 지원.

 

 
 
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;
 


 
[속성값]
 
font-style
폰트스타일. (기본값: "normal")
 
font-variant
작은대문자로 폰트변형여부. (기본값: "normal")
 
폰트굵기. (기본값: "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%;}

 

출처: 나나티 님


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012