CSS 字体新玩法之彩色字体的实现

如果你们设计师想在某些特别的专题活动中使用下图的字体作为标题字体进行展现,怎么办呢?做成图片咯。然后你可能会遇到这几个问题:不同屏幕下的适配,要是只做一种尺寸的图,放大或缩小后的效果都不太好。直接做成 SVG?好像不能复制到 Word 里面加粗啊,也就是说,这种做法使得这些“文字”本身失去了真实文字该有的能力。

此时彩色字体的好处就显现出来了。既能达到视觉效果上的要求,还拥有常规文字的功能,能够复制,能够粘贴,还可以被屏幕阅读器阅读,丝毫不妨碍常规操作。

Playbox by Matt Lyon

什么是彩色字体(Color Font)

初识彩色字体

在我们所熟知的传统字体中,字体文件本身仅仅描述了字体的外形特征,这些特征一般包含着矢量的轮廓数据或是单色调位图数据。在浏览器渲染单色字体时,渲染引擎使用设定的字体颜色填充字形区域,最后绘制出对应文字及其设定的颜色。而彩色字体中,不仅仅存储了字体的外形特征,还保存了颜色信息,甚至还能在字体中提供不同的配色,增加了灵活性的同时也更具丰富的外形细节。

日常使用中最常见的彩色字体要数 Emoji 表情了。例如在 Windows 10 上,Segoe UI Emoji 就属于一款彩色字体。

通常彩色字体还会包含一些兼容信息,这些兼容信息包含 Unicode 编码的单色字形数据,使得在一些不支持彩色字体的平台上,仍然能够像渲染普通字体一样将彩色字体的字形渲染出来,达到一种向后兼容的效果。

 

彩色字体的实现标准

在彩色字体设计的发展历史上,由于各家有自己的实现方案,导致在 OpenType 字体中嵌入的色彩信息标准也不尽相同。在最新的OpenType 标准中  ,就有多达四种彩色字体数据的描述格式。

  1. SVG,由 Adobe 和 Mozilla 主导的矢量字体标准。其中不仅包含了标准的 TrueType 或 CFF 字形信息,还包含了可选的 SVG 数据,允许为字体定义颜色、渐变甚至是动画效果。SVG 标准中的配色信息也将存储在 CPAL 中。
  2. COLR + CPAL,由微软主导的矢量字体标准。其中包含 COLR 即 字形图层数据 和 CPAL 配色信息表 ,对其的支持集成在 Windows 8.1 及之后的版本中。
  3. CBDT + CBLC,由 Google 主导的位图字体标准。其中包含了 CBDT 彩色外形位图数据 和 CBLC 位图定位数据 ,对其的支持集成在 Android 中。
  4. SBIX,由 Apple 主导的位图字体标准。SBIX 即 标准位图图像表 其中包含了 PNG、JPEG 或 TIFF 的图片信息,对其的支持集成在 macOS 和 iOS 中。

浏览器对各种标准的支持

浏览器 支持标准 Microsoft Edge (38+, Win 10) SVG, SBIX, COLR, CBDT Firefox (26+) SVG, COLR Safari SBIX, COLR Chrome CBDT Internet Explorer (Win 8.1) COLR

数据来源 www.colorfonts.wtf

看到这么多种标准,参差不齐的浏览器支持,你可能会想难道又要根据UA派发不同格式字体做兼容么?告辞!

少侠且慢!

在 2016 年的时候,各大厂商最终同意使用 OpenType SVG 作为彩色字体的标准,也就是上面提到的 SVG, 也是 W3C 目前所用的标准 。相信在不久各大厂家浏览器将逐步支持 W3C 所用的 SVG 标准。

字体模块标准的现状

CSS Fonts Module Level 3  :目前处于候选推荐状态,是主流浏览器都已大部分实现的标准,最新一版候选标准发表于今年的 6 月 26 日。Level 3 标准基于之前的 CSS3 Fonts 以及 CSS3 Web Fonts,并将字体加载事件相关的标准移入CSS Font Loading  模块中。

CSS Fonts Module Level 4:Level 3 的下一代标准,目前处于工作组草案状态,最近一次草案更新于 4 月 10日。该版本草案基于 Level 3,新增的属性中比较新颖的功能,也就是本文将要介绍彩色字体(Color Font)的支持。

CSS 字体新玩法之彩色字体的实现

扫一扫手机访问