Font Awesome 发布 Duotone 字体，支持双颜色

无意中看到 Font Awesome 发布了 Duotone 双色字体，感觉很神奇，我还不知道 WebFont 竟然支持多种颜色，于是赶紧看了看。

首先，这是旧闻，实际上，去年，也就是2019年7月30日，Font Awesome 就发布了 Duotone。

Double the layers, double the fun. Introducing Font Awesome Pro Duotone: https://t.co/EI2wKQnx3w pic.twitter.com/N3LRxl8eLb

— Font Awesome (@fontawesome) July 30, 2019

关于 Duotone 的介绍，大家可以看这篇官方博客：Introducing Duotone。借张图直观地展现 Duotone 的效果：

然后我就很好奇它们是怎么实现的，据我所知 WebFont 不支持多颜色。研究了半天，发现原来是这样：

2019年5月30日，Font Awesome 发布了 Font Awesome Kits（工具包）。Kits 是一个 JS，用来取代之前直接使用 CSS 引用字体的方式。这样做有几个好处：

1. 根据字体使用情况按需加载
2. 可以在客户端管理缓存，避免重复下载图标
3. 可以自动更新图标，跟 Font Awesome 发布同步
4. 可以帮助开发者处理可用性问题（关于这一点，GitHub 曾经发布过一篇博客，解释他们为什么要从 Icon Font 切换回 图标：https://github.blog/2016-02-22-delivering-octicons-with-svg/）
5. 可以更快应用新技术，比如 HTTP2，SRI 等

上面几个好处都是 Font Awesome 官博《Introducing Font Awesome Kits》中列出来的，还有一个好处它们没说：可以修改 DOM。Duofont 正是藉此实现双色的。打开开发者工具，我们可以看到，所有图标 <i class="fad fa-*"></i> 都被替换成了 inline <svg>，包含两个图层，自然可以通过 CSS 控制颜色等样式。

这个思路很有意思，布局也一步一步规划的很好，虽然不知道最终效果如何，但还是学到不少东西。

Font Awesome 提供免费版，我一直在用。付费版一年 $99，我觉得还是贵了点，所以一直没用，有需求的同学应该试一下。