Font-face字体加载

发表于

Font-face是css3中的一个模块，它主要把自定义字体嵌入到你的网页中，@font-face 可以消除对用户电脑字体的依赖。用的比较多的场景就是用来生成自定义字符小图标，但font-face能做到的远不至于此！

语法

首先我们一起来看看@font-face的语法规则：

1
2
3
4
5
6
@font-face {
  font-family: <YourWebFontName>;
  src: <source> [<format>][,<source> [<format>]]*;
  [font-weight: <weight>];
  [font-style: <style>];
}
属性 值
font-family 自定义的字体名称
src source:自定义的字体的存放路径 format: 自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型: truetype,opentype,woff,svg等
font-weight 字重
font-style 字体样式 normal italic oblique

关于src

src表示调用字体文件，可以是本地字体文件（IE9+支持），也可以是线上地址（可能有跨域限制）。

1. 字体文件名简写

现在很多网站会使用“微软雅黑”字体，但是，“微软雅黑”的名称有点长：

1
2
3
.font {
  font-family: 'Microsoft Yahei';
}

此时我们就可以利用@font face规则简化，这样就容易记忆了，书写更快了：

1
2
3
4
@font-face {
  font-family: YH;
  src: local("Microsoft Yahei");
}

使用的时候直接：

1
2
3
.font {
  font-family: YH;
}

2. 更完美的用户体验

一些特殊的标题设计师就是喜欢用“方正粗雅宋”这个字体（已经购得版权），但是很显然，这么帅气的字体，几乎很少有用户安装的，所以实际开发的时候，全都是通过工具而生成一个全新的精简版的“方正粗雅宋”字体文件，再通过src属性url()方法外链这个字体文件。

很棒的方案，但还不够完美，为什么呢？虽然安装“方正粗雅宋”这个字体的用户并不多，但并不表示没有用户使用之。试想一下，假如有用户安装了这个字体，结果你在网页呈现的时候，还要再去外链一个额外的文件地址，岂不是白白的浪费？既浪费流量，体验又不一定好，如果字体文件加载慢，会看到文字“变形”的过程，显然是不友好的。

我们可以借助@font face规则中的local实现代码和体验上的进一步的提升，如下：

1
2
3
4
5
6
7
@font-face {
  font-family: FZCYS;
  src: local("FZYaSongS-B-GB"), 
       url("FZCYS.woff2"),  
       url("FZCYS.woff"),
       url("FZCYS.ttf");
}

于是乎，那些安装了“方正粗雅宋”这个字体的用户，就没有任何字体文件请求。加载更快了，用户体验上升了，还省了流量，如此百益无一害的事情，还不妥妥的用起来。

应用

1. 远端加载css字体。

有时候我们需要的字体是根据用户输入来决定加载的字体，那么，我们肯定是不希望加载所有文字的字体文件，而只是用户用到的字体。这个时候我们需要监控用户输入，在用户输入之后去调用api来生成一段字体的代码，然后把这段代码注入到页面中。让字体效果得以显示。

1
2
3
4
5
6
@font-face {
  font-family: "FZLTZHK--GBK1-0";
  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAOAIAAAwBgT1MvMnBM34MAAADsAAAAYGNtYXAADgH5AAABTAAAAUJjdnQgABUAAAAAApAAAAACZnBnbWXpIJkAAAKUAAABoWdhc3AA=) format("truetype");
  font-style: normal;
  font-weight: normal;
}

这里source用的是base64处理过后的一个字体文件，它也可以是服务端生成的一个字体文件路径。

2. js控制字体引入

在上面的案例中，通过向页面插入style节点，可以对dom中的文字生效，但canvas中的文字是不生效的，下面有另外一种方式，通过js的document.fonts来加载字体可以解决这个问题。

1
2
3
4
5
6
const fontFamily = 'FZZZHONGJW--GB1-0'
const h = `http://xxx.com/fonts/api/font/ttffontFamily=${fontFamily}&text=全球潮范一站购齐`
new FontFace(fontFamily, 'url(' + h + ')').load().then(function (t) {
  document.fonts.add(t)
  this.initCanvas()
})

关于更多document.fons，可以参考这里 https://googlechrome.github.io/samples/font-face-set/