CSS css加载远程字体

阅读(5618)

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

via: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

兼容性:
Safari, IE 6+, Firefox, Chrome, iOS, Android, Opera

几种字体格式的说明:

  • .woff 最广泛的支持
  • .eot 为了兼容IE的早期浏览器(IE8-),微软很早就创建的格式
  • .ttf 为了兼容早期的浏览器(比如Android)
  • .svg 也是为了兼容早期的浏览器,不过非常少,是个被淘汰的字体方案
  • .woff2 woff的优化版,增强了字体的压缩比,目前支持的浏览器较少,是未来web字体的方向。示例代码尚未包含

阅读更多

WOFF字体兼容情况: http://caniuse.com/woff
Google Web Fonts: http://www.google.com/fonts/
网页字体优化: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=zh-cn
多种字体格式生成器: http://www.fontsquirrel.com/tools/webfont-generator
多种字体格式介绍: http://css-tricks.com/snippets/css/using-font-face/