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

110 0

关于自定义字体,我一开始只以为只能本地加载,也就是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级的大小,这对于服务器来说,压力是很大的。

精简字体

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

字体格式兼容对象
eotie6-8
woff2现代浏览器都支持,ie9-11
woffwoff2的上一代,现代浏览器都支持, ie9-11
ttfAndroid 4.3及一下
svgios 4.1及以下

我们可以发现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文件中即可。

0

相关文章

微信收款码
微信收款码