远程字体 详解阿里巴巴矢量字体库css原理

关于自定义字体，我一开始只以为只能本地加载，也就是css里面定义的字体，都只能从本地加载到，但是后来我了解到字符图标，一开始也是照本宣科使用本地字体，这就导致了一个问题，如果服务器网速带宽不够，就会产生字符字体文件未加载完整时，有一个占位字符显示，时间一长就显得极度的难看。

然后我使用了阿里矢量字体库里面的字体，是可以直接下载一个css文件，然后本地引用，就可以直接用了，我就奇了怪了，怎么做到的，当然，这个疑问到今天也就完全明白了。

首先要明确一点，阿里巴巴的那个css文件虽然写的很多，但是个人测试的时候好像也不支持ie9以下，也不知道是代码问题还是什么，不过现在能兼容ie11就不错了。

自定义字体

@font-face {
  font-family: fonts;
  src: url("font.eot") format("eot");
  src: url("font.eot?#iefix") format("embedded-opentype"),
      url("font.woff2") format("woff2"),
      url("font.woff") format("woff"),
      url("font.ttf") format("typetrue"),
      url("font.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

我们可以看到，标准的自定义字体，为了兼容性，使用了5种字体格式，如果一个字体文件大小是100kb，这里就要500kb，如果使用的是中文字体文件，那么将要达到MB级的大小，这对于服务器来说，压力是很大的。

精简字体

首先我们了解一下每种字体文件对应的兼容对象

我们可以发现svg格式的兼容已经可以放弃了，然后就是eot，事实上eot也是可以放弃的，因为ie9及以上支持woff系列字体，而ttf事实上可以放弃了，虽然我手里自己还有一台老安卓手机，但是拿它来浏览网页，除非我疯了。

所以，最极简的方式就是只使用woff系列，但是为了兼容性，一般很多人会在开头加上eot。

无用的iefix

@font-face {
  font-family: fonts;
  src: url("font.eot") format("eot");
  src: url("font.eot?#iefix") format("embedded-opentype"),
      url("font.woff2") format("woff2"),
      url("font.woff") format("woff"),
  font-weight: normal;
  font-style: normal;
}

这里我们使用了两个eot，其中第二个eot后面有一个#iefix，事实上这个东西一点用都没有，有用的是他前面的？问号。

原因是因为ie9之前的版本有一个解析的bug，如果src里面有多个url()属性，ie会把后面的所有字符都当做一个url地址解析，这就导致地址错误而返回404，于是我们给eot后面加上？问号，这样后面的内容就会作为url的参数传递而不会影响到正确的链接。

用过get请求的应该明白是怎么一回事吧，所以#iefix没用，删除也是可以的。

但是我们可以发现，既然可以有多个url属性，那么为什么要两个src呢？

两个src的原因

原因是因为我们一般测试ie的兼容的性的时候，现在都习惯直接在ie的开发者工具里选择对应的ie版本进行测试，这样既方便又省事，但是事实是这样开启的ie低版本ie8及以下的时候，是无法识别？问号这种解决方案的，这就导致我们在测试的时候无法通过刚刚说明的办法来解决问题，反倒生成了新的问题。

所以一般都会在开头第一句src上使用一个不带？问号的用于解决这个问题，所以会有连个src。

但是现在我们不需要再去兼容低版本的ie了，并且连jq都开始放弃低版本的ie，所以我们可以去除eot的请求。

@font-face {
  font-family: fonts;
  src: url("font.woff2") format("woff2"),
      url("font.woff") format("woff"),
  font-weight: normal;
  font-style: normal;
}

如果你想保险一点，还可以使用这种写法：

@font-face {
  font-family: fonts;
  src: url("font.eot");
  src: local("☺"),
      url("font.woff2") format("woff2"),
      url("font.woff") format("woff"),
  font-weight: normal;
  font-style: normal;
}

我们在第二个src中使用了一个loacl属性，其作用是用于防止低版本ie请求完eot后还请求后面的woff字体。

local()是表示从用户系统中加载字体，然后笑脸字符ie6-8并不识别，于是完美跳过了这个src，而高版本的ie9-11则可以继续请求后面的woff。

远程字体

我们可以将字体存储在其他服务器中，通过链接请求的方式加载到本地，但是要注意的是，web是默认禁止跨域访问的，所以你可能回遇到请求被禁止的访问的情况。

解决这个问的办法也很简单，我们可以设置服务器允许所有的访问，这里以nginx为例，我们在对于的站点配置加入以下这段文本：

location / {  
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
  
      if ($request_method = 'OPTIONS') {
          return 204;
      }
    } 

设置完毕后，我们可以将字体文件上传至你想要的位置，然后通过http请求这个文字，比如：https://xxx.xxx.com/fonts/font.eot

然后对应替换掉url属性里的链接就行了。

阿里巴巴矢量字体库css

阿里的css它的woff2的url属性是一个base64的转换，我们也可以自己手动将字体转换成base64，而且要注意的是，base64的优点就是在于减少了http的请求，但是base64并不能压缩大小，反倒如果文件过大，转换后的代码大小会比原来的更大一些，所以转换的时候注意下文件的大小再做选择。

还有一点需要注意的就是，转换过来的base64你可以用引号包裹，也可以不用，我测试的时候两种方式浏览器都能正常识别到。

这里再附上一个在线字体转base64的网址：

transfonter

使用方法也很简单，先add上传需要转码的字体文件，然后打开base64按钮，勾选woff2格式，然后按convert按钮，等待一会就会出现下载文件，自己下载完毕将css文件中的base64复制到你自己的css文件中即可。