웹마스터 팁

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; }

제목 글쓴이 날짜
member 모듈 업데이트가 계속 나오는 경우 고니고니 2015.05.06
속도관련 나노팁. [5] 1052 2015.05.04
익명게시판에서 임시저장된 글을 불러와 등록하면 익명처리되지 않고 글쓴이 정보가 기록되는 버그 수정 [1] sejin7940 2015.01.23
팝업모듈에서 jQuery 충돌 해결 - 팝업창이 안뜰때. [5] file 똑디 2013.03.22
xe설치시 퍼미션 문제나 DB엑세스 문제 해결하기 길가던분 2015.05.01
[애매모호]스케치북 게시판을 뭔가 큼직큼직하게 눈에 잘들어오게 바꾸기 [10] socialskyo 2014.01.03
PC에서 모바일화면 보는방법 [2] 빅스타 2015.04.29
스케치북 게시판 추천+등록 버튼 만들기 (수정) [8] file 숭숭군 2012.09.22
양력을 음력으로... [7] pupstar 2001.08.14
[초간단 자바스크립트!] 이미지 드래그하기..~~ [8] ∑Ztxy 2003.11.02
간편 css 압축 Ansi™ 2015.04.21
XE 1.5 이상으로 DB 이전시 일부 DB가 빠질 경우 - 내용추가(0203) [7] sejin7940 2012.02.02
정렬을 사용자정의값으로 한 경우 저장이 안 되는 현상 수정 [1] sejin7940 2015.01.06
프리 반응형 템플릿(html/css/js) 다운받을 수 있는 곳 [1] jhsongsh 2014.10.28
즐겨찾기 소스 - 파비콘등록 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