[CSS] 나눔고딕 웹폰트 사용하기

 

 

[CSS] 나눔고딕 웹폰트 사용하기

 

 

웹 폰트 문제 해결. @font-face troubleshooting.

 

@font-face 규칙은 CSS3에 새로 추가된 웹 글꼴 명세입니다. 표시하려고 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴을 내려받아 화면에 표시해 주는 방법인데요. 마이크로소프트가 독자적으로 IE 6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었습니다. 그러나 현실에서 사용하려면 다음과 같은 몇 가지 문제를 확실히 알고 있어야 합니다.

 

IE 6~8 브라우저는 *.eot 형식의 글꼴만 지원한다. 하지만 W3C가 권장하는 형식은 *.woff 이다. IE 9 브라우저는 *.eot 형식과 *.woff 글꼴을 모두 지원한다. Chrome, Safari, Firefox, Opera 최신 버전 브라우저는 *.woff 형식을 지원하지만 *.eot 형식은 지원하지 않는다. 결국 모든 브라우저를 지원하기 위해 *.woff 형식과 *.eot 형식을 함께 준비해야 한다.

표준과 비표준 글꼴을 모두 지원하기 위해 @font-face 규칙을 두 번 사용하는 경우 IE 6~9 브라우저는 *.woff 형식과 *.eot 형식을 모두 내려받아 성능에 좋지 않은 영향을 준다.

@media 구문 안쪽에서 @font-face 규칙을 사용하는 경우 IE 9 브라우저는 글꼴을 요청하지 않는다.

 

하나의 글꼴에 @font-face 규칙은 한 번만 선언

eot 형식과 woff 형식을 모두 사용해야 한다는 사실을 알고 나면 하나의 글꼴을 모든 브라우저에서 표시하기 위해 @font-face 규칙을 두 번 선언할 수 있습니다. 그러나 이런 방식은 시스템 글꼴이 없는 경우 IE 6~9 브라우저에서 eot 형식 외에 woff 형식도 요청하기 때문에 사용자는 불필요한 1MB 미만의 파일을 추가로 내려받는 샘이 됩니다.

/* Not recommended */
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}

 

위 코드는 더 나은 성능을 위하여 다음과 같이 개선할 수 있습니다. Paul Irish가 제안한 방탄 코드 입니다.

 

/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}

 

 

이 코드는 추가 설명이 필요합니다.

 

  ▶ ng 라는 글꼴 이름을 한 번만 선언한 다음 eot 형식과 woff 형식을 순차적으로 참조 했습니다.
  ▶ IE 6~8 브라우저는 eot 글꼴만 요청해서 화면에 표시합니다. eot 형식을 woff 형식보다 먼저 참조해야 합니다.
  ▶ IE 9 브라우저와 Chrome, Safari, Firefox, Opera 브라우저는 woff 글꼴만 요청해서 화면에 표시합니다. @font-face

     명세에 따르면 eot 글꼴에 대한 format(‘embeded-opentyep’) 선언이 없기 때문에 브라우저가 eot 글꼴을 내려받아야

     하지만 영리하게도 내려받지 않습니다.
  ▶ local(※) 값은 외부 자원을 참조하기 이전에 시스템 글꼴을 우선 참조할 수 있도록 만들어 줍니다. 그러나 이 코드에

     서는 IE 6~8 브라우저가 local() 값을 처리하지 못하는 특징을 이용하여 woff 글꼴을 추가로 요청하지 않도록 해 줍니 

     다.
  ▶ local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것입니다.

     굳이 2 byte 짜리 특수문자를 사용한 이유는 Mac OS 에서 2 byte 짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하

     지 않기 때문입니다.
  ▶ format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있습니다. 값은 반드

     시 홀따옴표 또는 쌍따옴표 안에 있어야 합니다. 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려

     받는것이 명세입니다. 글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외

     부 글꼴을 내려받도록 명시적으로 코드를 작성한 것입니다. IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에

     woff 글꼴을 추가로 요청하지 않도록 만들지만 여기서 그것이 목적은 아닙니다.
  ▶ 나눔고딕 시스템 글꼴의 이름을 한글과 영문으로 연거푸 두 번 적은 이유는 영문으로만 작성했을 때 제대로 표시하 

     지 못하는 브라우저가 있기 때문입니다. 한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋습니다.

 

IE 9은 @media 규칙 내부에 @font-face 허용 안함

다음과 같이 @media 구문 안쪽에 @font-face 규칙을 선언하는 경우 IE 9 브라우저는 외부 글꼴을 요청하지 않기 때

문에 표시하지 못합니다. 아래 예제는 Paul Irish가 제안한 방탄 코드를 수정하지 않고 그냥 미디어쿼리 구문 안쪽에

넣었습니다.

 

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
}

 

 

처음에는 이 현상이 유일하게 IE 9에만 발생하여 IE 9 버그인줄 알았는데 자세히 알고 보니 IE 9 브라우저만 CSS 2.1 명세에 잘 따른 것이었습니다. CSS 2.1 명세에 따르면 @media 규칙 내부의 또 다른 규칙인 @font-face는 유효하지 않다는 것입니다. 하지만 IE 9을 제외한 모든 브라우저는 이 명세에 따르지 않습니다. 이런 형식의 코드를 이용하면 WiFi/3G 망을 사용하는 좁은 해상도의 모바일 장치에서는 웹 글꼴을 내려받지 않아도 되기 때문에 모바일 성능 향상에 도움이 됩니다. 반응형 웹을 구현하기 위해 누구나 한 번쯤 생각할 수 있는 코드입니다.

 

CSS 2.1의 @media 명세를 잘 지킨 IE 9 브라우저가 오히려 웹 글꼴을 표시하지 못하는 것은 문제입니다. 이 문제는 미디어쿼리 밖에 IE 9 전용 코드를 추가 작성하는 방법으로 해결할 수 있습니다. IE 9 조건 주석을 사용하기 때문에 IE 9 이외의 다른 브라우저는 해석하지 않습니다.

 

 

<!?[if IE 9]>
<style>
/* This code is used only in IE 9 */
@font-face{
font-family:ng;
src:url(NanumGothic.eot)
}
body{font-family:나눔고딕, NanumGothic, ng}
</style>
<![endif]?>

 

IE 9 전용 코드를 별도의 외부 파일로 분리하려면 아래와 같이 응용하면 됩니다.

 

<!?[if IE 9]>
<link rel=”stylesheet” href=”ie9fix.css” />
<![endif]?>

미디어쿼리 규칙을 이용하여 해상도를 기준으로 웹 글꼴을 분기 처리하고자 했으나 IE 9 브라우저가 아예 글꼴 요청을 하지 않았기 때문에 IE 9 브라우저만 미디어쿼리 밖에서 웹 글꼴을 요청하도록 코드를 추가한 것입니다.

 

 

 

사이트를 서치하다가 혼자보려고 긁어놓고 저장해놓은 글인데 좋아보여 올리려니 출처를 모르겠네요.ㅡ.ㅡ;;;

혹시나 아시는 분이 있으시면 알려주세요. 출처명기하겠습니다.

 

출처를 찾은것 같네요. ㅎㅎㅎ

 

http://naradesign.net/wp/2012/06/19/1830/      << 유명하신 분인데요. 한번씩 가셔서 다른글들 읽으셔도 좋아요.