Css彩色字体 - font-palette属性

更新日期: 2022-07-22阅读: 367标签: 字体

为何要使用彩色字体

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

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


什么是彩色字体(Color Font)

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


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



彩色字体的实现标准

在最新的OpenType 标准中 ,就有多达四种彩色字体数据的形容格式。

SVG,由 Adobe 和 Mozilla 主导的矢量字体标准。其中不仅包含了标准的 TrueType 或者 CFF 字形信息,还包含了可选的 SVG 数据,允许为字体定义颜色、渐变甚至是动画效果。SVG 标准中的配色信息也将存储在 CPAL 中。

COLR + CPAL,由微软主导的矢量字体标准。其中包含 COLR 即 字形图层数据 和 CPAL 配色信息表 ,对其的支持集成在 Windows 8.1 及之后的版本中。

CBDT + CBLC,由 Google 主导的位图字体标准。其中包含了 CBDT 彩色外形位图数据 和 CBLC 位图定位数据,对其的支持集成在 Android 中。

SBIX,由 Apple 主导的位图字体标准。SBIX 即 标准位图图像表 其中包含了 PNG、JPEG 或者 TIFF 的图片信息,对其的支持集成在 macOS 和 iOS 中。


浏览器对各种标准的支持

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

不过在2016 年的时候,各大厂商最终同意使用 OpenType SVG 作为彩色字体的标准,也就是上面提到的 SVG, 也是 W3C 目前所用的标准 。相信在不久各大厂家浏览器将逐渐支持 W3C 所用的 SVG 标准。以下内容来源于作者张鑫旭:超酷!CSS font-palette与彩色字体显示


font-palette 与字体颜色

好,关于彩色字体的基础知识介绍完了,下面可以讲讲本文的重点,也就是彩色字体的这个“彩色”的颜色控制了。

在过去,无论是普通字体还是彩色字体,如果想要表现出不一样的颜色或者纹理,往往需要使用mask 遮罩,或者 background-clip:text 方法 进行模拟,或者使用 filter 滤镜或者 mix-blend-mode 混合模式进行变色。但是这些方法都属于曲线救国,往往会丢失很多细节,效果并不如人意。

而 font-palette 属性专门用来改变彩色字体中的字形颜色的,配合 @font-palette-values 规则,可以让 css 对字符色彩的控制达到一个全新的高度。

以现在浏览器更新换代的速度,不出一年,其实就可以在生产环境使用对应的技术了。况且,此特性属于渐进增强的特性,就算浏览器不支持,也不影响初始的能力,因此,学起来,不要犹豫。


如何设置字体的调色?

彩色字体中有个调色板的概念,是字体在制作的时候定义了一系列的颜色组合。

font-palette 属性的作用就是调用其中指定的调色板。

因此,使用过程大致可以分为以下这三块:

  1. 自定义字体;
  2. 自定义字体中的调色板;
  3. 调用调色板。

1. 自定义字体

自定义字体使用 @font-face 规则,这里,我们使用一个名为 Rocher Color 的多彩字体进行示意,假设此字体文件名是 RocherColorGX.woff2。

则我们可以定义一个名为 'Rocher' 的自定义字体,这个字体使用的就是多色字体文件。

@font-face {
    font-family: 'Rocher';
    src: url(./RocherColorGX.woff2);
}

2. 自定义调色板

2. 至于字体中的调色板定义,这个需要借助 @font-palette-values 规则,大家可以看下下面的 CSS 代码

@font-palette-values --Zhangxinxu {
    font-family: Rocher;
    base-palette: 9;
}

表示定义了一个名为 –Zhangxinxu 的调色板,这个调色板使用的是第9号基础色板。

所谓的“基础色板”,指的是字体制作时候内置的一系列调色板,使用 CSS base-palette 属性进行调用。

现在问题来了,我如何知道字体中有哪些色板呢? base-palette 属性后面的序号又是什么意思呢?

3. 调色板的获取和规则

有个名叫 Wakamai Fondue 的在线网站工具可以帮助识别字体中的颜色色板。

点击页面中间的圈圈就可以上传字体进行识别了:


此工具很强,不仅可以识别色板,字体特征(连字、字距、上下错落等),可变特性(内轮廓、外阴影、轮廓等)等都可以识别,大家可以收藏备忘下。

例如,这里可以识别 RocherColorGX.woff2 字体共有 11 个 4 色调色板,其中,第一个色板是默认的配色(浏览器不支持 font-palette 属性显示的颜色),序号是 0,然后往下依次是 1-9.

也就是 base-palette:0 表示使用的是默认色板, base-palette:1 使用的是第2个色板,依次类推。


4. 调用调色板

有了自定义的调色板,我们就可以使用 font-palette 属性调用了,例如:

.text {
    font-palette: --Zhangxinxu;
}

此时 .text 选择器对应的元素中的字符就会调用调色板序号为 9 的色值显示,是有点灰灰的颜色效果,如下截图所示:


5. 完整代码与效果

将上面的代码整合一下,就有了完整的多彩字体颜色设置的实现了。

假设有如下的 html 元素:

<h4 class="grays">Color fonts</h4>
<h4 class="purples">Color fonts</h4>
<h4 class="mint">Color fonts</h4>

则下面的 CSS 可以让这三段文字分别显示不同的色板色值:

/* 自定义字体 */
@font-face {
  font-family: 'Rocher';
  src: url(./RocherColorGX.woff2);
}
h4 {
  font-family: 'Rocher';
  font-size: 50px;
}
/* 自定义调色板 */
@font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}
@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 7;
}
/* 调用调色板 */
.grays {
  font-palette: --Grays;
}
.purples {
  font-palette: --Purples;
}
.mint {
  font-palette: --Mint;
}

最终的渲染效果如下图所示(如果浏览器支持 font-palette 属性):


眼见为实,您可以狠狠地点击这里: @font-palette-values使用演示demo

如果您的浏览器版本还不足,则显示的效果会是默认的色板颜色,也就是棕黄色色板的效果。


override-colors 重置调色板颜色

除了使用默认的调色板色值,我们还可以使用 CSS override-colors 属性重置调色板中的颜色。

override-colors 属性同样只在 @font-palette-values 规则中使用才有效。

语法如下:

override-colors:
    0 <color>,
    1 <color>,
    2 <color>,
    ...;

至于颜色的数量的多少是有字体决定的,例如 Rocher Color 这个字体的每个色板是 4 个颜色,则这里的 override-colors 就可以重置 4 个颜色值。

但是,具体哪个序号对于那块的色值是无法判断的,需要自己代码调试才知道。

我们来看一个使用案例,单独使用 override-colors 属性,则表示在默认的调色板上重置某些颜色值。

@font-palette-values --Default {
  font-family: Rocher;
  override-colors:
    0 #2a80eb,
    1 #eb4646,
    2 #f59b00,
    3 #1cad70;
}

.default {
  font-palette: --Default;
}

意思是自定义一个名为 –Default 的调色板,里面的颜色将默认调色板的 4 个颜色全部覆盖了个遍。

此时设置了类名 default 的元素的英文字符渲染效果如下图所示:


如果我们只希望重置某个调色板中的具体的一两个色值,而不是全部,则此时可以和 base-palette 属性一起使用。

@font-palette-values --Palette6 {
  font-family: Rocher;
  base-palette: 6;
  override-colors: 2 #f59b00;
}

此时调色板 –Palette6 中只有一个颜色覆盖成了橙色,截图效果见下面:


上述效果有对应的演示页面,您可以狠狠地点击这里: override-colors覆盖文字调色板颜色demo

其他有趣的展示

这里还有个演示页面,利用 override-colors 属性自定义 emoji 表情各个部位的颜色,原始地址是 这里 ,如果无法访问了,也可以点击这里体验效果。

当改变了几个颜色值后,此时相关的 CSS 代码如下截图所示:



其他说明、结语等

对于中文环境,受制于字体文件过大,以及缺少对应的字体,因此,多色字体技术的实际应用不是中文的处理,更多的是英文数字,或者是某些彩色的矢量图标。

虽然目前也有彩色 icon 图标,但一般都是 SVG 绘制的,颜色的控制并不方便。


如果将其转换成彩色字体,再配合 font-palette 属性进行控制,那就方便多了。

不知道有没有自动转换的工具,理论上应该是可以支持的,不过我没找到,如果已经有了,欢迎大家进行反馈,我更新到文章中。

越来越期待以后的 Web 产品样式与形态了。


链接: https://www.fly63.com/article/detial/11928

H5禁止微信内置浏览器调整字体大小

微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节。但是这也会导致字体大小改变以后,出现页面布局错乱的情况。

CSS3样式_实现字体发光效果

text-shadow 属性仅仅是用来设置文本阴影的,似乎并不能实现字体发光效果。其实不然,这正是 text-shadow 属性的精妙之处。当阴影的水平偏移量和垂直偏移量都为0时,阴影就和文本重合了。这时,如果增大阴影模糊的距离,就可以达到字体外发光的效果了。

css3 文字闪烁效果_html实现文字闪烁代码的多种形式

这篇文章总整理了3种文字闪烁效果,主要使用到css3的animation属性,闪烁效果包括:通过改变透明度来实现文字的渐变闪烁、通过设置text-shadow的值,来实现文字阴影闪烁的效果、利用背景图片或者背景渐变,实现文字颜色的闪烁效果

css3 自定义字体_使用@font-face方式实现个性化字体

当我们在浏览一些网站时发现,里面含有一些十分个性的字体,这些字体并不是我们电脑上安装的字体。那么css是如何实现自定义字体的呢?在css3中可以通过@font-face模块,把自己定义的Web字体嵌入到你的网页。

前端开发你该知道的字体 font-family

小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错。就 Web 常用的一些字体而言,经常听说的字体类型,大致可以分为这几种

css蚀刻字体_css3如何实现蚀刻文本?

css3利用text-shadow属性来实现蚀刻文本,创建文本显示为“蚀刻”或刻在背景中的效果。背景必须比阴影暗,效果才能发挥作用。 文字颜色应该稍微褪色,使其看起来像是刻在背景上的。

字体是如何渲染的?影响字体渲染的因素

Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset= 信息,这一般有最高的优先级;网页本身 meta header 中的 Content-Type 信息的 charset 部分,对于 HTTP 头未指定编码或者本地文件,一般是这么判断;假如前两条都没有找到,浏览器菜单里一般允许用户强制指定编码;

CSS3 font-face使用

在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3,web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上

如何实现label长度固定,文字分散分布的效果

这种效果主要通过text-align-last属性来实现。text-align-last:规定如何对齐文本的最后一行,当文本只有一行的时候,text-align属性不设置,text-align-last也是有用的。当然这只是针对非IE和Safiri而言。

CSS引入本地字体与在线字体

有些时候为了强调某些文字,需要使用一些比较特别的字体,CSS中现在也可以比较方便的引入字体了,如果需要引用在线字体,首先需要找到在线字体,国内推荐谷歌字体

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!