사용자 도구

사이트 도구


html:css:fontface

문서의 이전 판입니다!


fontface/Web font

기본 형태

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

변환 서비스

Cross Domain Problem

  • Chrome을 제외한 다른 일부 브라우저에서는 웹 폰트가 font-face 설정이 동일 Domain 혹은 그 SubDomain에서 온게 아니면 무시해버린다.
  • AddType application/vnd.ms-fontobject .eot
    AddType font/ttf .ttf
    AddType font/otf .otf
    AddType font/woff .woff
     
    <FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
    </FilesMatch>
     
    # 아래와 같이 여러 도메인을 추가 할 수 있다는 얘기가 있는데, 실제론 작동하지 않았다.
    Header add Access-Control-Allow-Origin "http://domain1.com"
    Header add Access-Control-Allow-Origin "http://domain2.com"

특정 영역만 적재

  • unicode-range 로 특정 영역만 적재가 가능하다. 2012년 현재 IE 9+, Webkit 계열만 지원.
@font-face {
  font-family: foo;
  src: url('foo.ttf');
  unicode-range: U+31-33;
}
html/css/fontface.1390264843.txt.gz · 마지막으로 수정됨: 2014/01/21 09:40 저자 kwon37xi