차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- html:css:fontface [2015/04/17 11:51]
kwon37xi
+++ html:css:fontface [2022/12/20 14:19] (현재)
kwon37xi
@@ 줄 1: / 줄 1: @@
 ====== fontface/Web font ======
-  * [[http://naradesign.net/wp/2012/06/19/1830/|» 웹 폰트 문제 해결. @font-face troubleshooting.]] : @font-face를 가장 잘 설명한 듯.
-  * [[http://siana.tistory.com/211|샷타이거's Simple Blog :: CSS 폰트 : 웹안전 폰트와 다운]]
-  * [[https://developer.mozilla.org/en/css/@font-face|Mozilla Docs - @font-face]]
-  * [[http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx|MSDN @font-face]]
-  * Firefox/Safari/Chrome/IE9이상 최신 버전들은 WOFF 포맷 지원
-  * IF8 이하는 EOT 포맷만 지원
-  * [[http://www.google.com/webfonts|Google WebFonts]], [[https://www.google.com/webfonts/earlyaccess|Google WebFonts EarlyAccess]]
-  * http://fontface.kr : 나눔글꼴 웹폰트 지원
-  * http://api.mobilis.co.kr/webfonts/ : 다양한 오픈소스 웹 폰트 지원
-  * http://www.nfont.co.kr/ : 상용 웹 폰트 서비스
-  * [[http://frends.kr/topics/webfont-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/|Webfont 사용하기 | FRENDS.KR]]
-  * [[http://sixrevisions.com/css/font-face-web-fonts-issues/|How to Bulletproof @font-face Web Fonts]]
-  * [[http://mygony.com/archives/3722|웹 폰트를 사용한 아이콘]]
-  * [[http://blog.iolo.kr/500|독거노인 개발자의 우울 :: Typekit 웹폰트로더 활용]]
-  * [[https://github.com/typekit/webfontloader|typekit/webfontloader]] : 웹폰트가 로딩되기전 기본 폰트로 보여주고, 로딩 후 웹폰트로 바꿔준다.
-  * [[http://www.fontsquirrel.com/tools/webfont-generator|webfont generator]] TTF글꼴을 업로드하면 DATA-URI로 생성해줌
 ===== 기본 형태 =====
@@ 줄 40: / 줄 25: @@
   * [[http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains|Access-Control-Allow-Origin 다중 설정]]
   * [[http://blog.jidolstar.com/920|IE11에서 AWS S3에 올라간 Font자원을 로드하지 못하는 문제 해결하기 -지돌스타 - 쿠키랩 블로그-]]
-  * <code apache>
+===== Apache 설정 =====
+<code apache>
 AddType application/vnd.ms-fontobject .eot
 AddType font/ttf .ttf
-AddType font/otf .otf
+AddType font/opentype .otf
-AddType font/woff .woff
+AddType application/font-woff .woff
+AddType application/font-woff2 .woff2
 <FilesMatch "\.(ttf|otf|eot|woff)$">
@@ 줄 55: / 줄 43: @@
 Header add Access-Control-Allow-Origin "http://domain1.com"
 Header add Access-Control-Allow-Origin "http://domain2.com"
+</code>
+  * ''.woff''는 과거에는 ''font/woff''였으나 현재는 ''application/font-woff''로 MIME 타입이 변경되었다. [[https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%98%A4%ED%94%88_%ED%8F%B0%ED%8A%B8_%ED%98%95%EC%8B%9D|웹 오픈 폰트 형식]]
+  * ''.otf''는 과거에는 ''font/otf''였으나 현재는 ''font/opentype'' 으로 변경되었다.
+===== nginx 설정 =====
+  * [[http://drawingablank.me/blog/font-mime-types-in-nginx.html|Font mime types in Nginx ◔_◔ Drawing a Blank, by Mike Fulcher]]
+  * ''mime.types''
+<code>
+font/ttf                      ttf;
+font/opentype                 otf;
+application/font-woff         woff;
+application/font-woff2        woff2;
+application/vnd.ms-fontobject eot;
 </code>
@@ 줄 67: / 줄 67: @@
 </code>
+====== 참조 ======
+  * [[https://blog.banksalad.com/tech/font-preload-on-safari/|지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions | 뱅크샐러드]] : 최적화
+  * [[http://naradesign.net/wp/2012/06/19/1830/|» 웹 폰트 문제 해결. @font-face troubleshooting.]] : @font-face를 가장 잘 설명한 듯.
+  * [[http://siana.tistory.com/211|샷타이거's Simple Blog :: CSS 폰트 : 웹안전 폰트와 다운]]
+  * [[https://developer.mozilla.org/en/css/@font-face|Mozilla Docs - @font-face]]
+  * [[http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx|MSDN @font-face]]
+  * Firefox/Safari/Chrome/IE9이상 최신 버전들은 WOFF 포맷 지원
+  * IF8 이하는 EOT 포맷만 지원
+  * [[https://fonts.google.com/|Google Fonts]]
+  * [[http://www.google.com/webfonts|Google WebFonts]], [[https://www.google.com/webfonts/earlyaccess|Google WebFonts EarlyAccess]]
+  * http://fontface.kr : 나눔글꼴 웹폰트 지원
+  * http://api.mobilis.co.kr/webfonts/ : 다양한 오픈소스 웹 폰트 지원
+  * http://www.nfont.co.kr/ : 상용 웹 폰트 서비스
+  * [[http://frends.kr/topics/webfont-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/|Webfont 사용하기 | FRENDS.KR]]
+  * [[http://sixrevisions.com/css/font-face-web-fonts-issues/|How to Bulletproof @font-face Web Fonts]]
+  * [[http://mygony.com/archives/3722|웹 폰트를 사용한 아이콘]]
+  * [[http://blog.iolo.kr/500|독거노인 개발자의 우울 :: Typekit 웹폰트로더 활용]]
+  * [[https://github.com/typekit/webfontloader|typekit/webfontloader]] : 웹폰트가 로딩되기전 기본 폰트로 보여주고, 로딩 후 웹폰트로 바꿔준다.
+  * [[http://www.fontsquirrel.com/tools/webfont-generator|webfont generator]] TTF글꼴을 업로드하면 DATA-URI로 생성해줌
+  * [[http://mytory.net/2016/06/15/webfont-best-practice.html|웹 폰트를 로컬 스토리지에 저장하는 기법 - 캐시 안정성 증가, 글꼴 깜빡임 현상 제거]]
+  * [[https://taegon.kim/archives/5528|한국어와 웹 폰트에 관한 6.1가지 사실]]
+  * [[https://spoqa.github.io/2017/02/15/using-shs-as-webfonts.html|스포카 한 산스 웹폰트로 사용하기]]
+  * [[http://ppss.kr/archives/95221|한국어와 웹 폰트에 관한 6.1가지 사실]]
+  * [[http://fontawesome.io/|FontAwesome]]
+  * [[https://transfonter.org/|Online @font-face generator — Transfonter]]

권남

사용자 도구

사이트 도구

차이

문서 도구