반응형
@font-face는 css3라고 알고 있지만, 사실 이전부터(css2) 있던 규칙이다.
다만 Embedded Open Type(EOT)포맷 라이센스로 인해 Microsoft의 웹 브라우저인 인터넷 익스플로어에서만 사용되어 왔다.
그러나 사파리 3.1의 릴리즈와 함께 라이센스 문제를 해결한 Tyue Type Font(TTF)와 Open Type Font(OTF)를 웹 페이지에 웹 폰트처럼 사용 할 수 있게 되었다.
웹 브라우저가 웹 폰트 형식의 Downloadable Font를 다른 포맷으로 지원하기 시작하고, Web Open Font Format(WOFF) 지원이 일반화되었다.

font-face란?

font-face규칙은 CSS3에 새로 추가된 웹 글꼴명세로 시스템에서 지원해주지 않는 글꼴을 웹 서버에서 내려 받아 화면에 표시해 주는 방법으로 MS가 독자적으로 IE6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었다.

font-face 문제점 및 사용방법

font-face는 웹 서버에서 글꼴을 내려 받아 사용하므로 글꼴이 없는 사용자가 이용하는데 좋다.
하지만 font-face를 사용하기 전에 다음과 같은 몇 가지 문제를 확실히 알고 있어야 한다.

  • * TTF(True Type Font)는 용량이 커서 EOT(Embedding Open Type)나 WOFF(Web Open Font Format)를 쓰는 것이 일반적이다.
    (TTF형식일 경우 영문 글꼴은 크기가 작지만, 한글 글꼴의 경우 크기가 상대적으로 큼. TTF형식은 압축되지 않은 타입으로 웹에서 사용하긴 무리)
    ※ 예) 나눔고딕.TTF 는 2.23MB(한자 포함 4.13MB), EOT,WOFF로 변환하면 나눔고딕.EOT는 846KB, 나눔고딕.WOFF는 981KB

    해결방법

    TTF형식 파일을 EOT, WOFF형식 파일로 변환하여 사용.
    (EOT, WOFF형식으로 변환시 상대적으로 최대는 30%~70%의 용량으로 압축효과가 있다.)

  • * IE6~8 브라우저는 EOT형식 글꼴만 지원, 크롬, 사파리, 파이어폭스, 오페라는 WOFF형식 글꼴만 지원.
    (IE9 브라우저는 EOT, WOFF형식 글꼴 둘다 지원함)
      ie IE chrome 크롬 firefox 파이어 폭스 safari 사파리 opera 오페라
    WOFF 9부터 지원 지원 지원 지원 지원
    EOT 6~9지원 미지원 미지원 미지원 미지원
  • * 기본문법
    @font-face{
    	font-family: <a-remote-font-name>;
    	src: <source>;
    	font-weight: <weight>;
    	font-style: <style>
    }
    
    속성값(Values)
    <a-remote-font-name>
    font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
    <source>
    원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
    <weight>
    폰트의 굵기(font weight) 값(생략 가능).
    <style>
    폰트 스타일(font style) 값(생략 가능).
    사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다.
    만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.
  • * 모든 브라우저에서 글꼴을 표시하기 위해 font-face규칙을 두번 선언해야 한다.
    @font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
    @font-face{font-family:ngeot; src:url(NanumGothic.eot)}
    body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}
    
    font-face규칙을 두번 사용할 경우 시스템 글꼴이 없는 경우 IE6~9 브라우저에서 EOT형식 외에 WOFF형식도 요청하기 때문에 사용자는 불필요한 1MB미만의 파일을 추가로 내려받는 셈이다.
  • 해결방법위에서 봤듯이 IE6~8 브라우저는 EOT를 지원한다. 그렇기 때문에 불필요하게 WOFF파일까지 요청 할 필요가 없다.
    때문에 IE6~8에서는 local(※)이라는 구문을 넣어서 WOFF의 요청을 막아준다.local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것. 굳이 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.
    (IE6~8 브라우저가 두번째 src속성을 해석하지 못하도록 하기 위함. local값의 용도는 사용자 로컬 시스템 글꼴이 있는 경우 참조하는 것인데 Mac 컴퓨터는 시스템 글꼴 이름이 모두 1바이트로 되어 있기 때문에 2바이트 이름을 사용해서 아예 제외. local값은 비워두면 안되기 때문에 반드시 넣어야 하고 여기에 로컬에 전혀 없을만한 글꼴이름을 넣는다.)☞ font-face 명세에 따르면 'EOT'글꼴에 대한 format('eot') 선언이 없기 때문에 선언을 굳이 안함.
  • format('woff') 포맷 타입이 선언되어있는데, format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다.
    값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 하며 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세이다.
    글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것이다.
    IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만든 것이다.
  • local(※) 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다. 그러나 이코드에서는 IE6~8 브라우저가 local() 값을 처리하지 못하는 특징을 이용하여 WOFF 글꼴을 추가로 요청하지 않도록 해준다.
  • @font-face{
    	font-family:ng;
    	src:url(NanumGothic.eot);
    	src:local(※), url(NanumGothic.woff) format('woff')
    }
    
    body{font-family:나눔고딕, NanumGothic, ng}
    

참고

미디어 쿼리를 이용하여 @media 구문 안쪽에 @font-face규칙을 선언하는 경우 IE9 브라우저는 미디어쿼리 안의 @font-face를 무시하기 때문에 표시하지 못한다.

해결방법

* IE9 조건부 주석문 사용

<!–-[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 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}
}

해결방법

* @font-face 규칙을 미디어쿼리 밖에 선언

/* IE 9 does not support @font-face within @media */
@font-face{
	font-family:ng;
	src:url(NanumGothic.eot);
	src:local(※), url(NanumGothic.woff) format(‘woff’);
}

@media all and (min-width:768px) {
	body{font-family:나눔고딕, NanumGothic, ng}
}

IE6~8 브라우저는 미디어쿼리를 지원하기 위해 respond.min.js 파일을 사용해야 한다.(미디어쿼리 구문 안쪽에 @font-face 규칙을 추가하는 경우도 있다.)

마치며...

Font-Face(웹 폰트)의 성가신 점은 바로 브라우저 호환성이다. 브라우저마다 다르게 보인다, 브라우저마다 적용이 안 된다 등등
여러 가지 말들이 많지만, 맑은커뮤니케이션에서 테스트 해본 결과 위와 같은 방법을 사용하면 왠 만한 이슈는 예방하고 정상적으로 사용 할 수 있게끔 해준다.
이상!!!!!!!!!!

반응형

+ Recent posts