CSS

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

목차
  1. font 예제 - 글자 스타일 한번에 지정
  2. font 정의
  3. font 구문
  4. font 예제 - 글자크기 적용 O
  5. font 예제 - 글자크기 적용 X
  6. 아이폰에서 폰트사이즈 고정

 

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.

모든 브라우저 지원.

 

 

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 예제 - 글자크기 적용 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%;}

 

출처: 나나티 님


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
1/33
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰 1
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인