웹마스터 팁

1.기본적인 설치방법.

 

나눔고딕 혹은 맑은 고딕을 CSS의 최상단에서 정의한다

 

@font-face {font-family:'NanumGothic'; src: url('images/NanumGothic.eot');}  

@font-face {font-family:MalgunGothic; src:url(images/MalgunGothic.eot);}

 

상기는 익스플로어에서만 적용됨

 

크롬등 다 브라우저에도 적용시킬려면 다음과 같이 적용. 

@font-face {

    font-family:'NanumGothic';

    src: url('images/NanumGothic.eot');

    src: url('images/NanumGothic.eot?#iefix') format('embedded-opentype'),

         url('images/NanumGothic.woff') format('woff'),

         url('images/NanumGothic.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

 

body 나 기타 엘리먼트에 상기에서 정의한 font-family 를 적습니다.

body {
font-family:'맑은고딕' 'NanumGothic', 'MalgunGothic';

}

* 맑은고딕이라는 글꼴을 앞쪽에 선언하면 사용자 로컬 PC에서 맑은고딕 글꼴이 이미 설치되어 있는지 확인해 보고 이미 설치된 것으로 확인되면 woff, eot 포멧 글꼴은 아예 다운로드 하지 않고 시스템 글꼴로 등록된 맑은고딕을 사용해서 글꼴을 렌더링 합니다. 만약 맑은고딕 글꼴이 로컬 PC에 없는 경우 woff, eot 글꼴을 내려받기 해서 렌더링 합니다

 

* 웹폰트의 단점은 폰트 용량이 커서  로딩 속도가 늦어 질 수 있습니다.

 

 

2. 모빌리스 웹폰트를 이용하는 방법

웹폰트 로딩 문제를 해결할 수 있는 방법으로 모빌리스 웹폰트를 이용하는 방법이 있습니다.

css 파일에 다음 한즐 추가하면 브라우저별로 eot,woff,ttf로 변환되서 표협됩니다.

 

@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb); 

 

그리고 CSS에서 폰트를 지정 합니다. 기본적으로 모빌리스에서 나눔고딕의 영문이름이 NanumGothicWeb 그래서 CSS에서 폰트를 NanumGothicWeb으로 바꿔줍니다

 

* { font-family: 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum; }

제목 글쓴이 날짜
즐겨찾기 소스 - 파비콘등록 soroweb 2015.04.16
누리고 쇼핑몰 상품취소 혹은 반품시 마일리지 자동회복하기 [6] garnecia 2015.01.21
확장변수에 시분초 추가하기 [1] file 해떨 2015.04.15
JS로 IE 6,7,8 구분하기 [4] 키스투엑스이 2015.04.14
|웹폰트(네이버 맑은 고딕, 나눔고딕) 적용하기 [1] 다큰왕자 2014.03.18
나눔고딕 웹 폰트 적용하기. [10] 정찬명 2011.12.15
에디터에서 URL 클릭시 "http://" 삭제하는 방법 [2] 콜롬보. 2015.03.13
통합검색 사용 가부 설정 및 특정 그룹만 사용가능하게 제한 설정 기능 추가 - 보안이슈가 될 수 있는 부분 [1] sejin7940 2015.04.10
요청한 기능을 실행할 수 있는 권한이 없습니다. - 오류해결 file I-JEX 2015.04.10
댓글 새로고침 수정 [22] Lansi 2013.09.06
메인 로고 및 메인 이미지 변경 방법 [1] file okcashbag042 2015.04.08
웹 재요청 방지 및 트래픽 감소를 위한 방법 마루디자인 2015.04.06
setModule() 오류 발생시 qkrcjfgus33 2015.04.04
ie11에서 통합검색시 page가 바뀌면 검색키워드가 없어지거나 이상한 글자로 바뀌는 것에 대한 팁 garnecia 2015.04.03
[고급] 내 XE 모듈에 editor 삽입하기 [8] 개발해보쟈 2013.01.22
스케치북게시판 최신버전에 네이트온 /마이피플/플립보드 추가하는 방법 [4] file 가을풍경 2015.03.09
로고 만들기 귀찮을때^^* [1] 수백 2015.03.06
[스케치북5] 댓글 수정 간략화하기.. (새로고침 없이 하는 방법 추가) [16] file XE만세 2014.01.05
php 5.6에서 인증메일 SMTP 연결에 실패할때.. file 루비스코 2015.03.31
한국 ip list 범위 체크 및 데이터 갱신 마루디자인 2015.03.30