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

[font] CSS - @font-face 쿼리 - 다운받은 웹폰트적용 (= @font-face쿼리 = 다운글꼴적용 = 웹폰트이름재정의 = 웹폰트정의 = 폰트이름짓기 = 폰트페이스, IE 9)

@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.

웹폰트는 아래 경로에서 다운 가능.
https://fonts.google.com/ (로그인불요)

https://fonts.adobe.com/ (로그인필요)

 

4.

TTF/OTF 및 WOFF 포맷은 IE9 이상 주요 최신브라우저 모두 지원.

5.
CSS3

 

6.

웹폰트 사용 시 문제점

https://d2.naver.com/helloworld/4969726

 

 

 

@font-face 브라우저별 지원현황

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"로 설정)

 

 

@font-face 구문

 

@font-face {

  font-properties

}


 

 

@font-face 속성값 

Font 설명속성 Values (값) 의미
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');

}

 


 

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

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