在过去的两周里,彩色字体引起了很多 兴奋。 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.
耶,更多可能有一些合法用途的眼花缭乱的东西,但主要用于使网络更难阅读。 就像 blink 标签一样。 我相信会有一些适当的用途。
我希望在使用时,能考虑到视觉问题。 我可以看到这些字体会给有某些视觉障碍的人带来问题,例如。 大约 10% 的人口患有某种形式的阅读障碍,字母中的多种颜色可能会引发其中一些问题,并使识别字母形状变得更加困难。
我不太介意更大的字体文件大小,但使用这些更大字体的网站管理员,请帮大家一个忙,确保您的服务器设置为为它们发送适当的缓存标头,并在浏览器发送 etag 请求更改时做出适当的响应。
有没有办法使用
@supports
检测对彩色字体的支持? #LazyWeb我已经完全阅读了您发布的信息。 我从您的信息中获得了一些有用的想法。 作为一名网页设计支持者,我了解到您是如何管理学校发展的影响和管理学生的。 请继续关注您的更多信息。