尝试使用彩色字体

Avatar of Robin Rendle
Robin Rendle

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元免费信用额度!

在过去的两周里,彩色字体引起了很多 兴奋。 Adobe 对这项技术的描述 如下

OpenType-SVG 是一种字体格式,其中 OpenType 字体的所有或部分字形都以 SVG(可缩放矢量图形)艺术作品形式表示。 这允许在单个字形中显示多种颜色和渐变。 由于这些特性,我们也称 OpenType-SVG 字体为“彩色字体”。

早在 3 月份,Roel Nieskens 就写过一篇关于 他创建彩色字体的经历,并描述了他们想要解决的问题

网络上的排版是单色的:字符要么是黑色,要么是红色,绝不会是黑色和红色。

因此,使用彩色字体,字体设计师现在可以在字形本身中嵌入多种颜色。 然后,网页设计师可以使用 CSS 中的 font-variation-settings 属性来选择字体中可用的颜色选项之一。 在下面,我做了一个演示,展示了 Trajan Color(Adobe 推出的一款新字体,现在可通过 Typekit 获得)是如何工作的。

看看那些字形 ABC 的不同部分是如何包含不同的颜色提示的?

这意味着在表情符号和显示类型方面,设计师很快就会有更多有趣的选择。 目前,浏览器支持不是很好,但 Adobe 已经在 Nick Sherman 设计的 Typekit 页面 上提醒了大家。

浏览器对彩色字体的支持仍在不断发展,但在 Firefox 和 Microsoft Edge (IE) 中已经存在,我们预计很快就会有更多浏览器制造商采用这种格式。 在不支持彩色字体的浏览器中,它们将回退到普通的单色字形。

我认为,关于彩色字体如何回退的最后一点,由 Roel Nieskens 最好地说明了,这应该是这种情况下可能发生的完美渐进增强。

以下是一些您可以今天尝试使用的彩色字体的示例

但请注意! 这种方法存在一些问题。 最令人头疼的是上面我的演示中字体文件的大小:总共有 593 KB。 不过,说实话,在大多数项目中,我们可能不需要加载彩色字体的每个变体,这将大大减少我们提供的字体文件的大小。

其次,在 CSS 中似乎无法更改彩色字体内的各种颜色。 因此,在一段时间内,我们只能使用字体设计师在字体文件本身中为我们提供的样式。

尽管存在这两个痛点,但我仍然对彩色字体的出现以及它对网络排版可能意味着什么感到非常兴奋。 我可以看到,旧的木刻风格,尤其是由于这种新的字体格式而卷土重来。

请务必查看下面的演示(使用 Firefox 或 Edge)以查看彩色字体效果

查看 Pen 彩色字体演示 by Robin Rendle (@robinrendle) on CodePen.