CSS3 - Web Font 全流程规划 - 《代码知识结构》

01. 打包字体
02. 优化字体
- 固定字体

本质上来说，我们有关于对应字体文件的使用解决方案；浏览器会去从对应的css文件中去寻找font字体；如果在系统的本地环境中存在有对应的字体的话就会直接引用，没有就会去寻找在对应系统下的对应字体；

这就会触发问题，第一在不同的操作系统中默认字体是不一样的，如果对应使用的css中的字体在系统不存在也就意味着相同的web页面的在不同的系统下显示不一样的；甚至如果从设计稿出发有些位置的距离就会让整个页面显示乱掉；

基于上面如果统一效果的前提下；在设计的时候尽量使用都有的字体软件；第二如果在设计效果严格要求的话那么也就意味着我们要把对应的字体打包带入

01. 打包字体

// 引用的字体的样式
@font-face {
  font-family: 'DTMotf'; /* 自定义的字体名称; */
  src: url(/public/font/Raleway-Light.otf); /* 自定义的字体的存放路径、格式; */
  // [font-weight: <weight>]; /*  是否为粗体 */
  // [font-style: <style>]; /*  定义字体样式，如斜体 */
}

只要获取对应的字体文件的，这里面就需要知道对应的每一种字体格式的优缺点；其实无非也就是兼容性和体积的问题

TTF 兼容性好体积大

TTF (TrueType Font) 字体格式是由苹果和微软为 PostScript 而开发的字体格式。在 Mac 和 Windows 操作系统上，TTF 一直是最常见的格式，所有主流浏览器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被设置成 “installable” 才能支持（译注：别想了，转别的格式吧）。
TTF 允许嵌入最基本的数字版权管理标志————内置标志可以告诉我们字体作者是否允许改字体在 PDF 或者网站等处使用，所以可能会有版权问题。另一个缺点是，TTF 和 OTF 字体是没压缩的，因此他们文件更大。

OTF ttf升级版

OTF (OpenType Font) 由 TTF 演化而来，是 Adobe 和微软共同努力的结果。OTF 字体包含一部分屏幕和打印机字体数据。OTF 有几个独家功能，包括支持多平台和扩展字符集。OTF 字体可以在 Macintosh 和 Windows 系统上使用。
OTF 也允许多达 65000 个字符的存储。这个额外的空间让设计师可以自由地添加附加元素，比如小帽子、老式数字体、代替的字符和其他一些以前必须作为独立字体分发的附加材料。

EOT 兼容性不好体积小

EOT (Embedded Open Type) 字体是微软设计用来在 Web 上使用的字体。是一个在网页上试图绕过 TTF 和 OTF 版权的方案。你可以使用微软的工具从现有的 TTF/OTF 字体转成 EOT 字体使用，其中对字体进行压缩和裁剪使得文件体积更小。同时为了避免一些收版权保护的字体被随意复制，EOT 还集成了一些特性来阻止复制行为，以及对字体文件进行加密保护。听起来很有前途？嗯哼，可惜 EOT 格式只有 IE 支持。

WOFF 体积小兼容性好

WOFF (Web Open Font Format) 本质上是 metadata + 基于 SFNT 的字体（如 TTF、OTF 或其他开放字体格式）。该格式完全是为了 Web 而创建，由 Mozilla 基金会、微软和 Opera 软件公司合作推出。 WOFF 字体均经过 WOFF 的编码工具压缩，文件大小一般比 TTF 小 40%，加载速度更快，可以更好的嵌入网页中。metadata 允许在字体文件中包含许可数据，以解决版权问题。这是万维网联盟提（qing）倡（ding）的，所以毫无疑问的是字体格式的未来。目前主流的浏览器的新版本几乎都支持 WOFF。
WOFF2 是 WOFF 的下一代。 WOFF2 格式在原有的基础上提升了 30% 的压缩率。由于它还没有 WOFF 的广泛支持，所以还只是一个可展望的升级。

体积越小和兼容性越高就会让你的设计稿的准确度越好，兼容性好很好理解，体积小的话，由于在css中打包对应的字体；此时的字体并不会从本地获取；而是通过网络资源从服务器上获取，如果一个打包的字体软件比较大的情况下的，在同等带宽的情况下；用户的等待的时间就会很长；甚至有的在网络连接较慢的情况下会让整个系统卡死；

所以一般会将tof转化为wotf的模式 TTF转化为WOFF

02. 优化字体

固定字体

但是这种情况在web端中，字体的打包效率仍然在几百K甚至在1到几兆的大小，所以我们需要有一定的优化空间，比如有的时候我们使用的特殊的字体就使用了几个字，而且基本上不会改变，这个时候我只需要吧对应的字打包进去，或者就把对应的文字打包成图片切出去也可以；

非固定字体
这种字体是用于保障全链路的视觉统一而坐的，也就是说需要动态替换的情况；这里面就需要对对应的所有的字进行打包，当然也可以优化。

假如这个 myfont.woff2 文件大小为 4M，而网络下载速度只有 1M/s ，则加载这个字体需要 4 秒钟。这4秒期间由于还没有加载完成远程字体，浏览器会使用什么字体渲染呢？事实上，不同的浏览器表现会不一样的，以下是一些常见的桌面浏览器的表现：

IE：它会直接使用备用字体渲染，最后等webfont字体加载完毕后重新渲染。
Safari：它会一直等待webfont字体加载完毕，并且期间不会渲染字体。
Chrome / Firefox：它们会等待webfont字体加载，如果在3秒之内没有加载完毕，则使用备用字体渲染。最后webfont加载完毕，使用并重新渲染。

一般来说在网络接受字体的信息的效果的时候，在此之前我们可以使用一种其他的都有的默认字体进行替代，一旦接收好了，我们再替换。借助于 WebFontLoader 可以很容易的实现这一效果。

@font-face {
  font-family: 'myfont';
  src: url('./myfont.woff2') format('woff2');
}
// 注意，CSS 中只需要定义字体就行，而不要使用这个字休。

2 .然后引入 webfontloader (也可以通过 npm 安装)，将你在 css 中定义的字体名称添加到 custom.families 列表中，并在 active 回调中将该字体添加到对应的元素上，代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['myfont'],
  },
  classes: false,
  active() {
    document.body.style.fontFamily = 'myfont';
  },
});
</script>

不过这种还是对于数据的输出，还是不能够大范围的输出对应的字体文件；

Web Font 全流程规划