• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차
  1. @font-face 예제 - 다운받은 웹폰트 적용
  2. @font-face 정의
  3. @font-face 구문
  4. @font-face 속성
  5. @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');

}

 


 

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

분류 제목
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
column CSS - column-width 속성 - 컬럼 너비 지정 (= column-width속성 = 컬럼위드스속성…
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
box CSS - box-sizing 속성 ★★ - 너비결정방식 (= 길이결정방식 = box-sizing속성 = 박…
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-direction 속성(C) ★★ - 기본축 방향 결정. (= flex-direction…
flex CSS - justify-content 속성(C) ★★★ - 기본축에서 아이템 정렬. (= justify-…
flex CSS - align-items 속성(C) ★★★ - 교차축에서 아이템 정렬. (= align-items속성… 2
flex CSS - flex-wrap 속성(C) ★ - 아이템 줄바꿈 가능 여부. (= flex-wrap속성 = 플렉…
flex CSS - align-content 속성(C) ★★ - 줄바꿈 된 경우, 교차축 기준으로 라인 정렬. (= …
flex CSS - flex-flow 속성(C) ☆ - (flex-direction / flex-wrap) 속성 일괄…
flex CSS - order 속성(I) - 아이템 순서 재조정 (= order속성 = 오더속성, IE11) ※ 플렉…
flex CSS - align-self 속성(I) ★ - 교차축 기준으로, 아이템 자체 정렬. (= align-sel…
responsive CSS - @media 구문 - 미디어쿼리 이용한 반응형 스타일 구현 (= media쿼리) ※ IE/Edge…
responsive CSS - RES Intro - (반응형 웹디자인 소개)
responsive CSS - Viewport ★ - 사용자에게 보이는 웹페이지 영역 (= 메타태그 뷰포트 ※ 반응형 필수조건 …
responsive CSS - RES Grid-View - (그리드뷰 = 화면너비분할 = 화면분할 = 수동그리드)
responsive CSS - Responsive Image - (반응형 이미지) ★★★
responsive CSS - RES Video - (반응형 동영상)
responsive CSS - RES Frameworks - (반응형 프레임워크) - 반응형홈페이지틀
11/25
목록
찾아주셔서 감사합니다. Since 2012