Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

web sprit

웹폰트 적용하기 [구글웹폰트 & 폰트페이스(font-face)] 본문

웹1.0/CSS, CSS2

웹폰트 적용하기 [구글웹폰트 & 폰트페이스(font-face)]

커드만 2014. 9. 11. 11:11

Colored By Color Scripter™

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*①*/
@font-face {
 font-family: 'NanumBarunGothic';
 font-style: normal;
 src: url('./font/NanumBarunGothic.eot');
 src: url('./font/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
 url('./font/NanumBarunGothic.woff') format('woff'),
 url('./font/NanumBarunGothic.ttf') format('truetype');
}
 
/*②*/
@font-face {
 font-family: 'Nanum Gothic';
 font-style: normal;
 src: url('./font/NanumGothic.eot');
 src: url('./font/NanumGothic.eot?#iefix') format('embedded-opentype'),
 url('./font/NanumGothic.woff') format('woff'),
 url('./font/NanumGothic.ttf') format('truetype');
}
 
/*③*/
@font-face{
font-family:ng;
src:url(./font/NanumGothic.eot);
src:local(※), url(./font/NanumGothic.woff) format(‘woff’)
}
 
 
/*①*/body{Nanum Gothic, '나눔고딕', 'NanumGothic', serif, sans-serif;}
/*②*/body{NanumBarunGothic, '나눔고딕', 'NanumGothic', serif, sans-serif;}
/*③*/body{ng, '나눔고딕', 'NanumGothic', serif, sans-serif;}




▶ ③번 관련하여 문법 해석

1. ng(이름은 원하는데로 작성가능)라는 글꼴 이름을 한 번만 선언한 다음 eot 형식과 woff 형식을 순차적으로 참조.

2. IE 6~8은 eot 글꼴만 요청해서 화면에 표시한다.(eot 형식을 woff 형식보다 먼저 참조)

3. IE 9와 Chrome, Firefox, Safari, Opera는 woff 글꼴만 요청해서 화면에 표시(@font-face 명세에 의해 eot 글꼴에 대한 format('eot') 선언이 없기 때문에 브라우저가 eot 글꼴을 내려받아야 하지만 영리하게도 내려받지 않는다.

4. local(※) 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다. 그러나 이코드에서는 IE6~IE8이 local() 값을 처리하지 못하는 특징을 이용하여 woff 글꼴을 추가로 요청하지 않도록 해준다.

5. local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것. 굳이 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.

6. format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다. 값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 하며 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세이다. 글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것이다. IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만들지만 여기서 그것이 목적은 아니다.

7. 나눔고딕 시스템 글꼴의 이름을 한글과 영문으로 연거푸 두 번 적은 이유는 영문으로만 작성했을 때 제대로 표시하지 못하는 브라우저가 있기 때문이며 한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋다.



"나눔고딕" 같은 경우 구글 웹폰트로 존재하지만 "나눔바른고딕"은 구글폰트에 등록되어 있지 않다. 그러므로 "나눔바른고딕"은 폰트페이스를 이용하여 적용한다.

폰트페이스로 적용할시 필요한 폰트 파일 확장자로는 아래의 3가지와 같다.

1.eot

2.woff

3.ttf

'웹1.0 > CSS, CSS2' 카테고리의 다른 글

CSS로 가변폭의 컨텐츠를 가운데 정렬하기  (0) 2016.03.21
display 의 inline-block 속성 사용법  (0) 2016.03.21
가상요소(before, after) 정의와 사용방법 - CSS2  (0) 2016.03.14
css outline 속성, 포커스선  (0) 2016.02.15
css, css3 투명도 주기(접근성)  (0) 2014.12.02
닫기
공유하기 링크
'웹1.0/CSS, CSS2' Related Articles more
Comments