목차
@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)" 글꼴 중 하나를 사용할 필요 없음.다운주소는 반드시 소문자로 기재 . (※ 대문자 사용 시 IE에서 에러날 수 있음.)
3.
웹폰트는 아래 경로에서 다운 가능.
4.
TTF/OTF 및 WOFF 포맷은 IE9 이상 주요 최신브라우저 모두 지원.
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');
}
