新年伊始也来谈谈Webfont

开篇

随着设备终端的不断升级，浏览器的支持度愈来愈高。网页字体的流行也是必然的趋势，他的课选取，可搜索，可缩放，适配度高以及高性能、良好用户体验等优点让它一跃成为网页前端们实现设计师天马行空的设计图首选。 今天咱们就来介绍一下webfont及其应用，顺便讲讲怎么优化webfont。

介绍

简而言之，webfont就是可让网页使用在线字体的一种技术手段。在此以前设计师在设计稿当中使用的一些特殊字体因为在别人的设备里没有这个字体而没法显示预想的效果，咱们的解决方案是用图片来替换特殊字体，webfont的出现这个问题就引刃而解了。

它经过 CSS的@font-face语句引入在线字体，使用CSS选择器指定运用字体的文本。目前网络上使用的字体格式有四种EOT、TTF、WOFF 和 WOFF2

支持状况以下：

• WOFF 2.0 提供给支持它的浏览器（对许多浏览器来讲还没有实现）。
• WOFF 支持大多数浏览器。
• TTF 支持旧 Android（4.4 版如下）浏览器。
• EOT 支持旧 IE（IE9 版如下）浏览器。

注：从技术角度来说还有一种格式，即SVG字体，但IE和Firefox从不支持它，而且好像如今的Chrome也放弃了对他的支持，因此暂且就忽略它了。

font-face

css3推出了一个at-rule属性@font-face，来指定特定字体资源的位置、样式特性及其支持的 Unicode 子集。

语法以下：

@font-face {
      [ font-family: <family-name>; ] ||
      [ src: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
      [ unicode-range: <urange>#; ] ||
      [ font-variant: <font-variant>; ] ||
      [ font-feature-settings: normal | <feature-tag-value>#; ] ||
      [ font-variation-settings: normal | [ <string> <number>] # ||
     [ font-stretch: <font-stretch>; ] ||
      [ font-weight: <weight>; ] ||
      [ font-style: <style>; ]
    }
复制代码

font-family: 指定字体的名字，所指定的字体名字将会被用于font或font-family属性； local() 指令用于引用、加载和使用安装在本地的字体； format(): 经过该属性来指示URL资源引用的字体格式（可选）； unicode-range: 指定要使用的字体的Unicode子集，从而减少字体载入的体积；

好比上图设计师想要的结果，骚气的科技感数字咱们要使用DIN字体，可是DIN字体不是全部设备都支持因此咱们打算让他支持：

@font-face {
    font-family: DIN;
    font-style: normal;
    font-weight: 400;
    src: url(../assets/font/DIN_Alternate_Bold.eot);
    src: local("DIN Alternate"),
      url(../assets/font/DIN_Alternate_Bold.woff) format("woff"),
      url(../assets/font/DIN_Alternate_Bold.ttf) format("truetype"),
      url(../assets/font/DIN_Alternate_Bold.svg#DINAlternateBold) format("svg")
}
复制代码

当浏览器察觉到本地没有DIN字体的时候，他会按照指定的顺序循环访问提供的资源列表，若是存在一个format格式提示则先检查是否支持，若是支持就加载该资源，若是不支持则跳过进入下一个格式提示，若是不存在格式提示则不论如何会尝试加载相应的资源。

性能优化

压缩

字体是字形的集合，其中的每一个字形都是一组描述字母形状的路径。每种不一样字形，每每包含了大量的共同信息，这些信息是能够压缩的。 常见的压缩方式是：GZIP及其余兼容的压缩模式：

• EOT 和 TTF 格式默认状况下不进行压缩，你能够在服务器开启GZIP进行压缩；
• WOFF 具备内建压缩
• WOFF2 采用自定义预处理和压缩算法，提供的文件大小压缩效率比其余格式高大约 30% 你能够选择其余的压缩方式来减少字体的体积，但要注意作好浏览器测试。

unicode-range

利用unicode-range指定编码子集，能够大大减少字体的体积。使用方法有：

• 指定单一的字符编码用逗号隔开（例如 U+416）
• 间隔范围 用横杠- 表示代码的起始，例如 （U+400-4ff）
• 通配符（例如 U+4??）？表明任何16进制数字 上述三者能够配合使用，并用逗号隔开。 注：有时候有些浏览器对unicode-range支持的很差，这个时候咱们就须要对所使用的字体进行手动的选取子集。网络上不少第三方工具 如fonttools 字蛛等。

font-display

注：这是最新的属性，还没达到可以使用标准（目前Safari还不支持，Chrome部分版本支持） 这是最近刚刚提出来的一个方案，就为了解决字体渲染空白问题，说这个以前咱们先来说讲网页字体的加载和渲染问题。

主要诱因是浏览器在构建渲染树（DOM和CSSOM树）以前会延迟字体请求，由于浏览器必须构建万渲染树以后才能知道使用哪些字体来渲染文本，同时在获取到构建渲染树关键资源以前可能会阻止浏览器渲染文本（网页内容的首次渲染和字体资源加载之间的“竞赛”时，浏览器会产生遗漏渲染全部文本的渲染 注意是全部）。固然对于空白问题在不一样浏览器的表现不一样，好比Safari会在字体下载完成以前都阻断文本渲染，而chrome会等待最多三秒开始启用后背字体并在下载完成后重渲染。总结下来就下面这个图：

在Block阶段浏览器使用不可见字体渲染文本（出现空白渲染）；到了Swap阶段浏览器使用后备字体（sans-serif）渲染文本；在Failure这个阶段意味着字体下载失败，浏览器将一只延用后背字体。 目前的问题在于咱们无法控制这些阶段的时间长短以及当其中一个阶段失败后怎么处理，font-display给了这种可能。它有四个值：block, swap, fallback 以及 optional，固然也有auto其表现和block一致。 各个属性值表现以下图：

• font-display: block ,文本将被阻断一段时间（长短看浏览器，新版Safari， Chrome ，Firefox是3秒；IE为0秒可视为没有block阶段；旧版本Safari无限长时间），会出现所谓的空白渲染问题（FOIT）
• font-display: swap ，文本将不会出现block阶段，文本会当即用后背字体展示知道所需字体加载完成。会出现字体切换效果（FOUT）
• font-display: fallback ，表现介于block和swap之间。空白期缩短至100ms，而后切换到后备字体直到所需字体加载完成
• font-display: optional ，表现和fallback相似，区别在于它会自动的去根据网络的速度（如2g网络）来决定是否切换字体。

此属性使用时，咱们须要根据具体状况来使用：若是咱们使用webfont来作icon图时候，咱们是不可能接受fallback的，因此咱们须要使用font-display:block。

更多

想要说的是@font-face 下面提到的属性（如font-weight,font-style等）对于性能优化来讲也是很重要的，他会影响浏览器匹配资源和加载资源的效率以及视觉一致性等因素，因此尽量准确的给浏览器于明确的指示。 固然了其余的优化方案还有不少，包括HTTP缓存，利用FontLoading API优化起加载和渲染等自行探索吧。

结语

2017年过去了，原本想写个总结的。但人在欧洲的火车上，思绪全不在这上面。眨巴眼的功夫2018年已经悄然开始三两天了，杂货铺开篇也快两年了，因为17年后期也懒了许多文章一直没跟上，粉丝也没达到年初一万的小目标，但也9900有余，专栏共收录文章112篇（算上这，113篇）。在此感谢做者天方夜，于秋，谢然，染陌同窗，蒋欢，林鑫，SimplyY ，Awee，胡子大哈，吴成琦，LeviDing ，黄俊亮 ，林列欢 ，危险 ，ahonn 等（排名不分前后，可能有纰漏见谅）的投稿，为热爱前端的同窗们带来知识的饕餮大餐，没有大家的支持杂货铺也不会受到如此多关注。同时也感谢成千上万的粉丝一如即往的支持，大家是我坚持的动力。在知乎里遇到你们是个人荣幸，但愿在接下来的一年里咱们能延续这样的默契和友谊，为了这份纯粹的爱好共同进步。