Bootstrap 发布图表库 Bootstrap Icons 1.0，该准备切换到 SVG 了

Bootstrap 团队一边开发 Bootstrap 5，一边发布了 Bootstrap Icons 1.0（以下简称 BI）。官方全文见此：Bootstrap Icons v1.0.0。这个版本里包含 1100 个图标，涵盖范围很广，全免费（MIT），可以自由使用、修改。

真正引起我注意的是，这个仓库不再使用 Webfont，而是全部使用 SVG。官方文档 介绍了三种使用方式：

1. 直接嵌入 SVG 代码
2. 在 <svg> 中引用 BI 库并配合 <use> 使用
3. 通过 bootstrap-icons/icons/*.svg 直接使用

如果你非常怀念 Webfont 方式，可以用（3）结合 CSS background-image 的方式近似的模拟。

其实，GitHub 很早以前就开始从 Webfont（Icon font） 向 SVG 切换了，他们还特地写了篇博客解释这件事情：Delivering Octicons with SVG，在里面列举了六个理由：

1. Icon font 本身存在一些渲染问题，Webkit 内核的浏览器会使其边缘模糊，不利于辨识
2. Icon font 一般会延后加载，而字体在完成加载之前无法判定大小，所以加载完成之后，需要重新计算布局并且重新进行渲染，造成不必要的性能损耗
3. 可用性。参考这篇 Slide：Death to Icon Fonts，每十个人当中就有一个人存在阅读障碍，他们很难使用普通字体，必须使用专为他们设计的特殊字体，而这个时候，icon font 就会变成没有意义的方块。对使用阅读器的人更甚：icon font 是一种 hack，通常来说，我们并不会真的写文字进去，所以在他们看起来，图标会变得完全不可读。
4. 合适的图标尺寸
5. 方便重构字体文件
6. 方便制作动画

所以，如今 Bootstrap 放弃 webfont，使用 SVG 作为主要格式，应该说是大势所趋。这几年使用 Webfont，的确很方便，给开发带来很大的效率提升，但与此同时，也存在不少问题：

1. fontawesome 体积越来越大，现在一组字体要 1M+，加载很耗时，但是拆分非常困难，即使只用几个图标，也需要加载整个字体库
2. 无法对图标进行稍微复杂的操作，比如双色，或者特定部位的动画
3. 放大之后，图标比较丑，也不好加工
4. 前面说过的那些问题

所以未来我和我厂也要慢慢从 webfont 切回 SVG。这样也有助于提升我厂产品的可用性。其实，互联网行业的可用性一直都做得不错，软件开发目前也算是残障人士最有机会获得体面收入的机会，所以，我辈仍需努力呀。