목차
- @font-face 예제 - 다운받은 웹폰트 적용
- @font-face 정의
- @font-face 구문
- @font-face 속성
- @font-face 예제 - 「나눔 바른 고딕」 폰트 적용
@font-face 예제 - 다운받은 웹폰트 적용
<style>
@font-face {
font-family: hzStyleFont;
src: url("./css/font/hz_light.woff"); /* 가는글씨체 웹폰트주소 지정*/
}
@font-face {
font-family: hzStyleFont;
src: url("./css/font/hz_bold.woff"); /* 굵은글씨체 웹폰트주소 지정*/
font-weight: bold;
}
div {
font-family: hzStyleFont;
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
※ @font-face 쿼리는 여러 개 사용 가능.
※ 브라우저는 "hzStyleFont" 글꼴 지정 텍스트가 굵게 표시 될 때마다 굵은 폰트 정의해 둔 걸 사용.
@font-face 정의
다운받은 폰트 적용.
1.
이 규칙 사용하면, 웹 디자이너는 더 이상 "웹 안전 (web-safe)" 글꼴 중 하나를 사용할 필요 없음.
2.
웹폰트 다운주소는 반드시 소문자로 기재. (※ 대문자 사용 시 IE에서 에러날 수 있음.)
3.
웹폰트는 아래 경로에서 다운 가능.
4.
TTF/OTF 및 WOFF 포맷은 IE9 이상 주요 최신브라우저 모두 지원.
5.
CSS3
6.
웹폰트 사용 시 문제점
https://d2.naver.com/helloworld/4969726
7.
브라우저 지원 현황 확인.
PS.
| Font format |
크롬 |
IE |
Firefox |
Safari |
Opera |
|---|
| TTF/OTF |
4.0 |
9.0* |
3.5 |
3.1 |
10.0 |
| WOFF |
5.0 |
9.0 |
3.6 |
5.1 |
11.1 |
| WOFF2 |
36.0 |
X |
35.0* |
X |
26.0 |
| SVG |
4.0 |
X |
X |
3.2 |
9.0 |
| EOT |
X |
6.0 |
X |
X |
X |
* Edge 및 IE : 글꼴 형식은 "설치 가능 (installable)" 설정 경우에만 작동.
* Firefox : 기본적으로 비활성화되어 있지만 활성화 가능. (※ WOFF2 사용하려면 플래그를 "true"로 설정)
＊ 파일 로드 빠르기 순서 (= 파일크기 작은 순서): woff2 > woff > ttf > eot > svg
@font-face 구문
@font-face {
font-properties
}
@font-face 속성
| 속성 |
값 |
의미 |
|---|
| font-family |
name |
필수. font 이름 지정. |
| src |
URL |
필수. font 다운 URL(s) 주소 지정.
반드시, 소문자로 기재. |
| font-stretch |
normal (기본값)
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded |
선택. font가 늘어지는 정도 지정.
기본값: normal |
| font-style |
normal (기본값)
italic
oblique |
선택. font 스타일 방법 지정.
기본값: normal |
| font-weight |
normal (기본값)
bold
100
200
300
400
500
600
700
800
900 |
선택. font 굵기 지정.
기본값: normal |
| unicode-range |
unicode-range |
선택. font가 지원하는 유니코드 문자 범위 지정.
기본값: U+0-10FFFF |
@font-face 예제 - 「나눔 바른 고딕」 폰트 적용
@font-face {
font-family:'Nanum Barun Gothic';
font-style:normal;
font-weight:400;
src:url(/common/font/NanumBarunGothic.eot);
src:local('Nanum Barun Gothic'),
local('NanumBarunGothic'),
url(/common/font/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),
url(/common/font/NanumBarunGothic.woff2) format('woff2'),
url(/common/font/NanumBarunGothic.woff) format('woff'),
url(/common/font/NanumBarunGothic.ttf) format('truetype');
}
