🦉CSS - css加载远程字体


@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字体的方向。示例代码尚未包含

开发哥

CSS css加载远程字体

阅读更多