初试iconfont彩色字体

immortal
3,534 阅读6分钟

这是我参与更文挑战的第2天，活动详情查看： 更文挑战

开始

前两天，UI还没将图标切好，只好像往常一样去iconfont挑一挑好看的图标暂时代替一下。刚打开iconfont突然就对首页中对彩色图标的宣传吸引住了，它的标题是“比SVG更好用的彩色图标方案”。这让我不经回忆起了我是怎么处理彩色图标的。

如何出现一个彩色的图标

我想大多数人都和我一样，对此肯定不陌生。

  1. 图片（位图有损）
  2. css图片背景（位图有损）
  3. unicode图标文字（只有单色）
  4. SVG 刚刚接触html的小白都知道有img标签，将图标的png/jpg...等等html支持的图片格式显示在网页上就能够当成一个图标来使用。
<style>
.book-list{
  display: flex;
  flex-direction: column;
}
.book-list-item{
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
<div class="book-list">
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="图书的图标">三国演义</div>
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="图书的图标">红楼梦</div>
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="图书的图标">西游记</div>
    <div class="book-list-item"><img src="./book.png" style="width: 30px;" alt="图书的图标">水浒传</div>
  </div>

在接触css之后我们知道了可以使用背景图的方式来实现，背景+伪类，只要使用定义好的类名，就可以复用这个图标，这仍然是我现在图方便的时候的首选。

.book-list-item::before{
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url(./book.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

但是上面使用的png格式是一个位图并不是一个矢量图，意味着他不能够无损放大，简单的图标只是作为补充说明还好，但是目前为了适应不同分辨率，你只有选择更大尺寸的图片大小，才能更改的适应不同的场景。尽管如此，使用这种方法之后带来的锯齿感和越来越大的尺寸，只会让你感觉很难受

还好我们在电脑上使用的字体是矢量字体，其实文字也是一种我们赋予了含义的图标，你甚至可以用文字符号来表达你的情绪(T_T) o(￣▽￣)ブ，同样你可以定义自己的字体格式。iconfont就是这样一个矢量图网站，将你的图标转为字体文件从而被你使用。将刚才的书本图标加入项目->下载至本地,这样你就可以得到一些字体文件了。

image.png 你会得到很多字体格式，他都是各个厂商或者组织提出的标准。但是很可惜不是在所有浏览器中都能使用，所以为了兼容大多数的格式，像iconfont.css里一样这么去定义一个字体。

@font-face {
  font-family: "iconfont"; /* Project id 2624042 */
  src: url('iconfont.eot?t=1624277829622'); /* IE9 */
  src: url('iconfont.eot?t=1624277829622#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('iconfont.woff2?t=1624277829622') format('woff2'),
      url('iconfont.woff?t=1624277829622') format('woff'),
      url('iconfont.ttf?t=1624277829622') format('truetype'),
      url('iconfont.svg?t=1624277829622#iconfont') format('svg');
}
//将原来背景图改成使用字体
.book-list-item::before {
    font-family: iconfont;
    content: '\e653';
    display: inline-block;
 }

但是图标是显示出来了，显示的却是黑白的，这是字体文件的问题所在，你可以像修改文字一样修改它的颜色color:#f00,但是他是单色的。

在众多解压出来的文件中，你会发现一个svg文件。在某个浏览器退出历史舞台后，作为svg-icon使用形式慢慢成为主流和推荐的方法。可以说他解决了上面所有的问题

  • 支持多色图标了，不再受单色限制。
  • 支持像字体那样通过font-size,color来调整样式。
  • 支持 ie9+
  • 可利用CSS实现动画。
  • 减少HTTP请求。
  • 矢量，缩放不失真
  • 可以很精细的控制SVG图标的每一部分

使用svg你可以直接在浏览器上使用，但是这么使用就和用一张图片一样很不优雅，为了方便使用，以使用的symbol元素，将每个icon包括在symbol中，通过use元素使用该symbol。这里推荐一篇文章，使用webpack将多个svg的图标打包成SVG Sprites从而简化使用，这里不在赘述SVG的使用 手摸手，带你优雅的使用 icon

iconfont中彩色图标的使用

其实彩色图标早就出现了，现在OpenType规范中彩色字体技术已经趋于成熟了，iconfont才开始将彩色图标引入成为了全球第一个支持彩色字体图标的生产管理平台。 目前支持彩色字体的格式主要有以下几种，它们都是 OpenType 规范的一部分：

公司/组织字体格式（表名）矢量位图渐变系统支持
W3CSVG✅✅✅macOS 10.14+, iOS 12+,Windows 10 周年更新​
MicrosoftCOLR✅❌❌macOS 10.13+, iOS 11+, Windows 8.1+
AppleSBIX❌✅✅macOS and iOS
GoogleCBDT❌✅✅Android
Google&MicrosoftCOLRv1✅❌✅仅Chrome Canary90.0.4421.5+
  • SVG：由 Adobe 和 Mozilla 主导的矢量字体标准，全称是 OpenType SVG（以下简称 OT-SVG）。其中不仅包含了标准的 TrueType 或 CFF 字形信息，还包含了可选的 SVG 数据，允许为字体定义颜色、渐变甚至是动画效果。SVG 标准中的配色信息也将存储在 CPAL 表中。注意：Apple 的实现遵循 W3C 的SVG Native规范，这是 SVG 1.1 的子集。
  • COLR/CPAL(version 0)：由微软主导的矢量字体标准。其中 COLR 记录图层数据，CPAL 记录配色信息，对其的支持集成在 Windows 8.1 及之后的版本中（该版本不支持渐变）。
  • CBDT/CBLC：由 Google 主导的位图字体标准。其中 CBDT 记录彩色位图数据，CBLC 记录位图定位数据，这其实是 EBDT/EBLC 的彩色版本。
  • SBIX：由 Apple 主导的位图字体标准，也就是Apple Emoji使用的格式。SBIX 即标准位图图像表其中包含了 PNG、JPEG 或 TIFF 的图片信息，对其的支持集成在 macOS 和 iOS 中。
  • COLRv1 (version 1)：由 Google 推动的基于COLR/CPAL 表的升级版，支持渐变、仿射变换（Affine transformation）和多种混合模式。目前已经进入了OpenType 1.9 Alpha规范中。

iconfont 中的图标都是矢量的，所以只有两种格式可选，OT-SVG 和 COLR，iconfont选择了文件体积更小、性能更快、兼容性更好的 COLR 格式

挑选图标 设置项目

在Iconfont中选择一个你喜欢的多色图标，并加入项目，并在项目设置中勾上彩色

image.png

像unicode引用一样使用吧

设置完项目和上面使用unicode的方式引用字体文件的方式一样使用，就是那么简单。

个人观点

iconfont将彩色图标的引入使用，给矢量的多色图标带来了除svg之外新的选择。体验一圈下来对于习惯使用unicode字体的图标方式来说，完全就是无缝切换，给了全新的使用体验。但是svg仍然有吸引我的点：第一个是可以使用动画 第二个是svg在配置好svg-sprite-loader之后添加图标更为方便。每种方式都有各自的应用场景，正如我上文所说css背景+伪类在一些场景下仍然是不错的选择。

参考文章

avatar
文章
阅读
粉丝