CSS 字體新玩法之彩色字體
時間：2023-09-04 08:42:02 | 來源：網(wǎng)站運營
時間：2023-09-04 08:42:02 來源：網(wǎng)站運營
CSS 字體新玩法之彩色字體：
本文作者：何文力，360奇舞團前端工程師，同時也是 W3C CSS 工作組成員。
為什么要使用彩色字體
如果你們設(shè)計師想在某些特別的專題活動中使用下圖的字體作為標(biāo)題字體進(jìn)行展現(xiàn)，怎么辦呢？做成圖片咯。然后你可能會遇到這幾個問題：不同屏幕下的適配，要是只做一種尺寸的圖，放大或縮小后的效果都不太好。直接做成 SVG？好像不能復(fù)制到 Word 里面加粗啊，也就是說，這種做法使得這些“文字”本身失去了真實文字該有的能力。
此時彩色字體的好處就顯現(xiàn)出來了。既能達(dá)到視覺效果上的要求，還擁有常規(guī)文字的功能，能夠復(fù)制，能夠粘貼，還可以被屏幕閱讀器閱讀，絲毫不妨礙常規(guī)操作。
Playbox by Matt Lyon
什么是彩色字體（Color Font）
初識彩色字體
在我們所熟知的傳統(tǒng)字體中，字體文件本身僅僅描述了字體的外形特征，這些特征一般包含著矢量的輪廓數(shù)據(jù)或是單色調(diào)位圖數(shù)據(jù)。在瀏覽器渲染單色字體時，渲染引擎使用設(shè)定的字體顏色填充字形區(qū)域，最后繪制出對應(yīng)文字及其設(shè)定的顏色。而彩色字體中，不僅僅存儲了字體的外形特征，還保存了顏色信息，甚至還能在字體中提供不同的配色，增加了靈活性的同時也更具豐富的外形細(xì)節(jié)。
日常使用中最常見的彩色字體要數(shù) Emoji 表情了。例如在 Windows 10 上，Segoe UI Emoji 就屬于一款彩色字體。
通常彩色字體還會包含一些兼容信息，這些兼容信息包含 Unicode 編碼的單色字形數(shù)據(jù)，使得在一些不支持彩色字體的平臺上，仍然能夠像渲染普通字體一樣將彩色字體的字形渲染出來，達(dá)到一種向后兼容的效果。
彩色字體的實現(xiàn)標(biāo)準(zhǔn)
在彩色字體設(shè)計的發(fā)展歷史上，由于各家有自己的實現(xiàn)方案，導(dǎo)致在 OpenType 字體中嵌入的色彩信息標(biāo)準(zhǔn)也不盡相同。在最新的 OpenType 標(biāo)準(zhǔn)中 1，就有多達(dá)四種彩色字體數(shù)據(jù)的描述格式。
- SVG，由 Adobe 和 Mozilla 主導(dǎo)的矢量字體標(biāo)準(zhǔn)。其中不僅包含了標(biāo)準(zhǔn)的 TrueType 或 CFF 字形信息，還包含了可選的 SVG 數(shù)據(jù)，允許為字體定義顏色、漸變甚至是動畫效果。SVG 標(biāo)準(zhǔn)中的配色信息也將存儲在 CPAL 中。
- COLR + CPAL，由微軟主導(dǎo)的矢量字體標(biāo)準(zhǔn)。其中包含 COLR 即字形圖層數(shù)據(jù)和 CPAL 配色信息表，對其的支持集成在 Windows 8.1 及之后的版本中。
- CBDT + CBLC，由 Google 主導(dǎo)的位圖字體標(biāo)準(zhǔn)。其中包含了 CBDT 彩色外形位圖數(shù)據(jù)和 CBLC 位圖定位數(shù)據(jù)，對其的支持集成在 Android 中。
- SBIX，由 Apple 主導(dǎo)的位圖字體標(biāo)準(zhǔn)。SBIX 即標(biāo)準(zhǔn)位圖圖像表其中包含了 PNG、JPEG 或 TIFF 的圖片信息，對其的支持集成在 macOS 和 iOS 中。
瀏覽器對各種標(biāo)準(zhǔn)的支持
| 瀏覽器 | 支持標(biāo)準(zhǔn) |
| ---------------------------- | --------------------- |
| Microsoft Edge (38+, Win 10) | SVG, SBIX, COLR, CBDT |
| Firefox (26+) | SVG, COLR |
| Safari | SBIX, COLR |
| Chrome | CBDT |
| Internet Explorer (Win 8.1) | COLR |
數(shù)據(jù)來源 www.colorfonts.wtf
看到這么多種標(biāo)準(zhǔn)，參差不齊的瀏覽器支持，你可能會想難道又要根據(jù)UA派發(fā)不同格式字體做兼容么？告辭！
少俠且慢！
在 2016 年的時候，各大廠商最終同意使用 OpenType SVG 作為彩色字體的標(biāo)準(zhǔn)，也就是上面提到的 SVG，
也是 W3C 目前所用的標(biāo)準(zhǔn)。相信在不久各大廠家瀏覽器將逐步支持 W3C 所用的 SVG 標(biāo)準(zhǔn)。
字體模塊標(biāo)準(zhǔn)的現(xiàn)狀
CSS Fonts Module Level 3 2 ：目前處于候選推薦狀態(tài)，是主流瀏覽器都已大部分實現(xiàn)的標(biāo)準(zhǔn)，最新一版候選標(biāo)準(zhǔn)發(fā)表于今年的 6 月 26 日。Level 3 標(biāo)準(zhǔn)基于之前的 CSS3 Fonts 以及 CSS3 Web Fonts，并將字體加載事件相關(guān)的標(biāo)準(zhǔn)移入 CSS Font Loading 3模塊中。
CSS Fonts Module Level 4 4：Level 3 的下一代標(biāo)準(zhǔn)，目前處于工作組草案狀態(tài)，最近一次草案更新于 4 月 10日。該版本草案基于 Level 3，新增的屬性中比較新穎的功能，也就是本文將要介紹彩色字體（Color Font）的支持。
CSS 彩色字體相關(guān)標(biāo)準(zhǔn)
在支持彩色字體的瀏覽器中，雖然能夠正確渲染，但是你卻無法控制使用字體中內(nèi)置的其他配色。那么在 Level 4 標(biāo)準(zhǔn)中，就新增了一些彩色字體相關(guān)的標(biāo)準(zhǔn)讓我們能夠更好地使用。接下來我們就來看看吧。
選擇字體配色：font-palette
前面我們了解到，彩色字體通過 CPAL 表是可以擁有多種不同的配色方案的。
font-palette 有三個內(nèi)置的參數(shù)以及支持自定義配色來達(dá)到修改配色方案的效果。
- normal：瀏覽器盡可能地將該字體當(dāng)作非彩色字體進(jìn)行渲染，并選擇一個最適合閱讀的配色方案。瀏覽器在做決策時還可能將當(dāng)前設(shè)定的字體顏色
color加入決策條件中。還有可能自動生成一組未內(nèi)置在字體中的配色方案進(jìn)行渲染。 - light：一些彩色字體在其元數(shù)據(jù)中標(biāo)明某個配色方案適用于亮色（接近于白色）背景中。使用此數(shù)值，瀏覽器將會直接使用標(biāo)記了該特性的首個配色方案進(jìn)行渲染。如果字體文件格式無元數(shù)據(jù)或時元數(shù)據(jù)中未標(biāo)記相應(yīng)的配色方案，那么此時該數(shù)值的行為與
normal 相同。 - dark：正好與
light 相反。 - 自定義：上面我們介紹了三種基本的配色選擇，那么如果要使用其他的配色方案或是要自定義，我們將要借助接下來介紹的
@font-palette-values的幫助。
示例：
h1 { font-family: Segoe UI Emojil font-palette: light}自定義字體配色：@font-palette-values
@font-palette-values用于定義指定字體的配色規(guī)則。它允許開發(fā)者不僅可以自由選擇字體內(nèi)置的各種配色方案，還能自定義配色方案。而
font-palette選擇自定義配色方案也是通過本規(guī)則設(shè)置。
它的基本定義規(guī)則是
@font-palette-values name，
name 即為本配色規(guī)則的自定義規(guī)則名稱。
下面通過其中的三個關(guān)鍵屬性進(jìn)行解釋。
font-family
首先，在為字體設(shè)置配色時，我們先要指定這些配色信息是設(shè)定在哪個字體上的。通過
font-family即可將當(dāng)前配色配置綁定到某個字體上。
@font-palette-values Snow { font-family: TriColor;}base-palette
在作者制作彩色字體時，往往內(nèi)置了很多種字體配色，存儲這些信息時，每個不同的配色方案有自己對應(yīng)的
id，或者叫做
index。使用
base-palette 進(jìn)行選擇。
@font-palette-values Snow { font-family: TriColor; base-palette: 5;}color-x
圖片來源 typography.guru
上圖展示了 COLR 對字形的分層。 COLR 將字形的多個部分分為多個圖層，并按照特定的順序?qū)D層合并成為一個完整的字體。每一個圖層都由 CPAL 中的配色信息進(jìn)行上色。為了達(dá)到更強大的自定義效果，標(biāo)準(zhǔn)中使用
color-x 屬性提供對特定圖層顏色進(jìn)行復(fù)寫的能力。其中的
x 即為圖層
id。
@font-palette-values RedSnow { font-family: TriColor; base-palette: 5; color-1: rgb(255, 0, 0);}上述例子展示了如何通過
color-x 對圖層顏色進(jìn)行復(fù)寫。通過
base-palette: 5 選取自帶的配色，并通過
color-1: rgb(255, 0, 0) 將該配色中
id 為1的圖層顏色修改為紅色。
Level 4 其他值得注意的新屬性
font-min-size, font-max-size
與屬性名稱描述的一樣，這兩個屬性將限制
font-size最終的數(shù)值。如果
font-size的計算值超出設(shè)定的最大和最小值，
font-size的最終數(shù)值將會被直接修改為
font-min-size或
font-max-size。 這對于響應(yīng)式設(shè)計來說是比較有用的，將字體大小限制在一個范圍，使得字體不會變的過大或過小。
總結(jié)
Fonts Module Level 4 中有趣的新功能還是挺多的，具體效果和標(biāo)準(zhǔn)改進(jìn)得等各大瀏覽器開始慢慢支持才能知道，讓我們拭目以待吧。
文內(nèi)鏈接
- https://docs.microsoft.com/en-us/typography/opentype/spec/otff
- https://www.w3.org/TR/2018/CR-css-fonts-3-20180626/
- https://www.w3.org/TR/css-font-loading/
- https://www.w3.org/TR/css-fonts-4/
參考資料
- https://www.w3.org/TR/css-fonts-4/
- https://docs.microsoft.com/en-us/typography/opentype/spec/
- https://typography.guru/journal/windows-color-fonts/
- https://www.colorfonts.wtf/
致謝
感謝李松峰老師、高峰、劉觀宇、安佳對本文章做出的修改建議。
在線咨詢
