CSS如何远程加载字体的方法

2019独角兽企业重金招聘Python工程师标准>>>

网上有许多这种加载字体文件的 CSS 方法，以“微软雅黑”为例看这段代码：

html:  body {font-family:'微软雅黑'} 

css:   @font-face { 

      font-family:微软雅黑; 

           src: url('微软雅黑.eot'); /* IE9 Compat Modes */ 

          src: url('微软雅黑.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 

          url('微软雅黑.woff') format('woff'), /* Modern Browsers */ 

       url('微软雅黑.ttf')  format('truetype'), /* Safari, Android, iOS */ 

          url('微软雅黑.svg#微软雅黑') format('svg'); /* Legacy iOS */ 

         } 

一、先下载一个微软雅黑字体文件（注意：不要安装到系统中！）

二、新建一个 HTML 文件，用上面的方法把字体加载进来

    通过上面的代码，我们知道，除了需要一个 .ttf 格式的字体文件外还需要  .eot、.woff、.svg 这三个格式的文件，而如何获得这些文件应该会是解决 IE 系列浏览器的关键！

网上基本上没有发现有这几种格式直接下载的。有的都是介绍转换的方法。有些文章告诉了一些如何生成 .eot 文件的方法，我找了其中2个方法做了测试：

1. http://www.fontsquirrel.com/fontface/generator。是个专门把 .ttf 转换为 .eot 的网站，

折腾了很久，上传转换后下载下来的.eot文件不能使用（也有可能是我自己方法不对）。

2.http://ttf2eot.sebastiankippe.com/，在网站上直接选择上传文件，转换-下载。经本人测试这个可以使用。

还有一个问题：

    就是我们通常在网上找到一些漂亮的字体，可是他只有OpenType格式的，转换也不方便，经过测试，发现也可以以上面的方式加载到css中：

@font-face {

    font-family: 微软雅黑;

    src:url('微软雅黑.otf')  format('OpenType');

}

若不考虑兼容性现在最近版本的浏览器都可以支持（chrome、Firefox、Safari、IE11）IE6~IE9均不支持。

其他格式.woff 和 .svg 格式由于适用的浏览器很少可以不管。

 

转载于:https://my.oschina.net/u/1403236/blog/188569