绝大多数情况下，我们在网页开发中都要使用 Web 安全字体，高傲的设计师肯定不局限于安全字体。

那么问题来了：我们如何保证客户端对字体的显示一致性，本文对此进行深入探讨。

我们从头说起，设计师要求使用苹方字体，可是这并不是一个web安全字体。

这意味着，如果客户端没有该字体库，那么我们的用户将看到一些默认字体，这违背了我们最初“显示一致性”的美好愿景。

怎么办，关于这个问题，我做出了以下尝试。

一、查找方案

不是什么大问题，先搜索一下，很快我查到了某中文字库，大致用法如下：

<script type="text/javascript" src="//cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js">

嵌入如下js代码片段：

效果是达到了，可是当看到要收费的时候，我已经不爱你了。第三方的方案还要收费，显然并不完美。

那怎么办，一定还有其他方案，我们继续搜索。

二、下载字体

找个免费的试试？好吧，去下载苹方字体，我自己引入字体包。

历尽千辛万苦，总算找到了一个苹方字体库。下载之后发现文件后缀是 ttf，浏览器中加载不出来。。。

可以从css的使用方式中看出端倪：

于是乎，我又想着有没有一个在线工具可以将 ttf 转化成 woff，那这样问题就迎刃而解了。

三、字体转换

找了一圈，大致问题如下：

1.文件太大的不能转换（下载到的苹方 ttf 为 11M ）；

2.只支持英文转换，中文的字体不能转换；

3.可以转换，但需要付费下载的；

四、终级解决方案

真是太失望了，不就是想转换一下字体吗，没一个靠谱的。那我自己来搞，是时候展现真正的技术了～

大致思路如下，这里我借助了开源项目 fontmin（传送门）：

1.加载fontmin；

2.指定转换文件，并指定输出目录，如果没有则创建；

3.转换为eot、woff以及svg格式输出；

4.svg格式文件较大，借助imagemin（传送门）对其进行压缩处理，之后输出；

五、快速开始

我们创建 index.js，如下：

代码很简单，大概过一下：

1.我们选择要处理的字体：PingFang-Light.ttf

2.将 ttf 转换成 eot 格式；

3.将 ttf 转换成 woff 格式；

4.将 tff 转换成 svg 格式；

5.由于 svg 文件较大，通过 svgo 进行优化输出；

6.异常捕获处理；

Demo 地址：

https://github.com/chenfengyanyu/web-font-convert

到这里，我觉得还有瑕疵。ttf 大小为 11M，转换的 woff 大小为 7M 左右，那么我们网页引用，会不会加载不起来呢？

那如果我们追求极致的体验呢，如何对字体压缩？也就是精简字体包，那该如何操作？

六、字体精简与压缩

关于字体压缩，我找到了这个：

字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。

我们先来安装：

找到 html 文件目录，运行：

注意：字蛛会分析页面使用的 webfont，也就意味着他只抓取静态页面的 font

七、总结

到这里，我们总算达到了目的，成功将苹方字体转换成了 Web 安全字体。回顾一下过程：

1.首先下载你需要的字体文件，一般会是 ttf 格式；

2.将 ttf 文件转换成 eot，woff，svg 等 web 支持字体；

3.压缩精简字体，达到优化加载目的；

是不是很简单，通过转换，理论上，你可以使用任何字体哦～

八、热门原创文章

1.还在手写网站吗，试试这款神器！

2.网站地图方案汇总，教你玩转可视化

3.HTTP 2.0 时代，你落伍了吗？