font

브라우저별 폰트포맷

EOT는 IE브라우저만 지원하고 WOFF는 모든 브라우저에서 지원합니다.

모든 브라우저에서 웹폰트를 사용하려면 src 속성에 코드를 추가해야 합니다.

글꼴파일유형

.eot  : IE8 이하버전(ie에서만 지원)

.otf / .ttf : 크롬, 파이어폭스, 오페라, 사파리, 안드로이드, ios

.woff : 크롬, 파이어폭스, ie9 이상, 사파리 등에서 인식되며 .otf/.ttf의 압축 버전으로 다른 글꼴 형식보다 빠르게 로드

.woff2 : woff보다 우수한 압축(평균 30%)이지만 사파리, ie, ios지원안됨

IE 6~8

IE 6~8은 EOT 파일만 지원하므로 EOT파일을 내려받도록 해야합니다.

@font-face{
    font-family : NanumSquare;
    src:url(NanumSquareR.eot?#iefix) format('embedded-opentype'), /* IE 6~8 */
         url(NanumSquareR.ttf) format('truetype');
}

따라서 위 코드처럼 파일명 뒤에 물음표(?)를 추가합니다. 

물음표 이후의 구문은 쿼리문으로 인식하기 때문에 모두 무시되어 NanumSquare.eot?파일을 다운로드 하기 때문입니다.

IE 호환성 보기 모드

IE 6~8에서  local()속성을 인식하지 못하는 것을 이용하여 물음표(?) 속임수 대신에 스마일()을 사용할 수 있습니다.

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareR.eot); /* IE 호환성 보기 */
  src: local(☺), /* IE 6 ~ 8 */
       url(NanumSquareR.ttf) format('truetype');
}

정리

@font-face {
  font-family: NanumSquare;
  src: url(NanumSquareR.eot); /* IE 호환성 보기 */
  src: url(NanumSquareR.eot#iefix) format('embedded-opentype'), /* IE 6 ~ 8 */
       url(NanumSquareR.woff2) format('woff2'), /* WOFF2 지원 브라우저 */
       url(NanumSquareR.woff) format('woff'), /* 모던 브라우저 */
       url(NanumSquareR.ttf) format('truetype');
}

위 코드를 가지고 브라우저별로 접속했을 때 어떤 폰트가 다운로드 되는지 알아보겠습니다.

1. IE 6~8로 접근하면 NanumSquareR.eot?가 다운로드

2. IE 호환성보기로 접근하면 NanumSquareR.eot가 다운로드

3. IE 9이상으로 접근하면 NanumSquareR.eot?가 다운로드

→ 만약 url(../webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype') 부분을 local("")로 바꾸면 NanumSquareR.woff가 다운로드

4. Safari로 접근할 때는 NanumSquareR.woff가 다운로드

5. Chrome, firefox, opera로 접근할 때는 NanumSquareR.woff2가 다운로드

※모든 브라우저를 대응하고 IE에서 eot파일이 아닌 woff파일을 로드받을 수 있게 하는 코드

@font-face { 
  font-family: NanumSquare;
  src: url(NanumSquareR.eot); /* IE 6 ~ 8, IE 호환성 보기 */
  src: local(☺),
       url(NanumSquareR.woff2) format('woff2'), /* IE Edge, WOFF2 지원 브라우저 */
       url(NanumSquareR.woff) format('woff'), /* IE 9+, 모던 브라우저 */
       url(NanumSquareR.ttf) format('truetype');
}

※참고 url : http://wit.nts-corp.com/2017/02/13/4258