아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

웹폰트 적용하기

관리자 | 2012.06.12 18:27 | 조회 4433
1. 직접적용

<style type="text/css">
@font-face {font-family: 파일명; src:url(파일경로.eot);}
#classname {font:normal 8px 파일명,''; color:#666;}
</style>

<div id=" classname">COPYRIGHT(C) 2010 99v.kr ALL RIGHTS RESERVED.</div>

- eot전환
http://www.kirsle.net/wizards/ttf2eot.cgi

--------------------

2. 외부CSS적용 (첨부파일은 나눔고딕세트)
본파일에서 CSS 로드
@import url('nanumgothic.css');

외부CSS 예시
/* Nanum Gothic */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(/경로/NanumGothic-Regular.eot);
  src: url(/경로/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(/경로/NanumGothic-Regular.woff2) format('woff2'),
       url(/경로/NanumGothic-Regular.woff) format('woff'),
       url(/경로/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(/경로/NanumGothic-Bold.eot);
  src: url(/경로/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(/경로/NanumGothic-Bold.woff2) format('woff2'),
       url(/경로/NanumGothic-Bold.woff) format('woff'),
       url(/경로/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(/경로/NanumGothic-ExtraBold.eot);
  src: url(/경로/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(/경로/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(/경로/NanumGothic-ExtraBold.woff) format('woff'),
       url(/경로/NanumGothic-ExtraBold.ttf) format('truetype');
}

twitter facebook me2day 요즘
98개(5/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
18 [Java] 경고창/경고메세지 띄우기 관리자 9574 2012.06.12 18:45
17 [Java] 레이어 숨기고보이고 관리자 4775 2012.06.12 18:40
16 [etc] 메타태그 모음! 관리자 5424 2012.06.12 18:30
>> [etc] 웹폰트 적용하기 첨부파일 관리자 4434 2012.06.12 18:27
14 [etc] 프린트소스 (IE8,크롬,사파리,파폭 테스트완료) 관리자 7725 2012.06.12 17:49
13 [html/css] CSS초보를 위한 또는! 오랜만에 코딩하는 분을위한! 간단한 CSS모음 관리자 6016 2012.06.12 17:34
12 [html/css] 아이프레임 (iframe) 옵션을 알아보아용~ 관리자 7717 2012.06.12 17:32
11 [html/css] 마우스 오버 소스 (드림위버에서 만들기귀찮아서 ㅋ 복사해둠) 관리자 7811 2012.06.12 17:31
10 [html/css] 우클릭,드래그,선택방지 모음 관리자 9053 2012.06.12 17:30
9 [Java] 주소복사스크랩 관리자 3549 2012.06.12 17:28
8 [html/css] 기초적인 언어별 인클루드 방식 관리자 4815 2012.06.12 17:16
7 [모바일] 스마트폰으로 홈페이지 접속시 자동 모바일홈피로 이동 소스 관리자 9186 2012.06.12 17:15
6 [etc] 실시간검색위젯 첨부파일 관리자 5425 2012.06.12 17:13
5 [Java] 퀵메뉴스크롤기능켜기끄기 관리자 4604 2012.06.12 17:11
4 [모바일] 페이스북식 모바일팝업 관리자 8689 2012.06.08 21:29
3 [모바일] 가로세로모드 다른CSS적용하기 사진 관리자 9282 2012.06.08 21:28
2 [모바일] 모바일 홈페이지 SMS문자,전화,메일 연결하기! 관리자 8272 2012.06.08 21:27
1 [etc] 환율 노출 소스! 외환은행 제공 사진 첨부파일 관리자 6600 2012.06.08 21:23