CSS 字型新玩法之彩色字型

奇舞週刊發表於2019-02-20
CSS

本文作者：何文力，360奇舞團前端工程師，同時也是 W3C CSS 工作組成員。

為什麼要使用彩色字型

如果你們設計師想在某些特別的專題活動中使用下圖的字型作為標題字型進行展現，怎麼辦呢？做成圖片咯。然後你可能會遇到這幾個問題：不同螢幕下的適配，要是隻做一種尺寸的圖，放大或縮小後的效果都不太好。直接做成 SVG？好像不能複製到 Word 裡面加粗啊，也就是說，這種做法使得這些“文字”本身失去了真實文字該有的能力。

此時彩色字型的好處就顯現出來了。既能達到視覺效果上的要求，還擁有常規文字的功能，能夠複製，能夠貼上，還可以被螢幕閱讀器閱讀，絲毫不妨礙常規操作。

Playbox

Playbox by Matt Lyon

什麼是彩色字型（Color Font）

初識彩色字型

在我們所熟知的傳統字型中，字型檔案本身僅僅描述了字型的外形特徵，這些特徵一般包含著向量的輪廓資料或是單色調點陣圖資料。在瀏覽器渲染單色字型時，渲染引擎使用設定的字型顏色填充字形區域，最後繪製出對應文字及其設定的顏色。而彩色字型中，不僅僅儲存了字型的外形特徵，還儲存了顏色資訊，甚至還能在字型中提供不同的配色，增加了靈活性的同時也更具豐富的外形細節。

日常使用中最常見的彩色字型要數 Emoji 表情了。例如在 Windows 10 上，Segoe UI Emoji 就屬於一款彩色字型。

Windows 10 上的 Segoe UI Emoji

通常彩色字型還會包含一些相容資訊，這些相容資訊包含 Unicode 編碼的單色字形資料，使得在一些不支援彩色字型的平臺上，仍然能夠像渲染普通字型一樣將彩色字型的字形渲染出來，達到一種向後相容的效果。

在 Word 2016 上插入 Segoe UI Emoji 顯示為單色字型

彩色字型的實現標準

在彩色字型設計的發展歷史上，由於各家有自己的實現方案，導致在 OpenType 字型中嵌入的色彩資訊標準也不盡相同。在最新的 OpenType 標準中 1，就有多達四種彩色字型資料的描述格式。

  • 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
Safari SBIX, COLR
Chrome CBDT
Internet Explorer (Win 8.1) COLR

資料來源 www.colorfonts.wtf

看到這麼多種標準，參差不齊的瀏覽器支援，你可能會想難道又要根據UA派發不同格式字型做相容麼？告辭！

少俠且慢！

CSS 字型新玩法之彩色字型

在 2016 年的時候，各大廠商最終同意使用 OpenType SVG 作為彩色字型的標準，也就是上面提到的 SVG，也是 W3C 目前所用的標準。相信在不久各大廠家瀏覽器將逐步支援 W3C 所用的 SVG 標準。

字型模組標準的現狀

CSS Fonts Module Level 3 2 ：目前處於候選推薦狀態，是主流瀏覽器都已大部分實現的標準，最新一版候選標準發表於今年的 6 月 26 日。Level 3 標準基於之前的 CSS3 Fonts 以及 CSS3 Web Fonts，並將字型載入事件相關的標準移入 CSS Font Loading 3模組中。

CSS Fonts Module Level 4 4：Level 3 的下一代標準，目前處於工作組草案狀態，最近一次草案更新於 4 月 10日。該版本草案基於 Level 3，新增的屬性中比較新穎的功能，也就是本文將要介紹彩色字型（Color Font）的支援。

CSS 彩色字型相關標準

在支援彩色字型的瀏覽器中，雖然能夠正確渲染，但是你卻無法控制使用字型中內建的其他配色。那麼在 Level 4 標準中，就新增了一些彩色字型相關的標準讓我們能夠更好地使用。接下來我們就來看看吧。

選擇字型配色：font-palette

前面我們瞭解到，彩色字型通過 CPAL 表是可以擁有多種不同的配色方案的。font-palette 有三個內建的引數以及支援自定義配色來達到修改配色方案的效果。

  • normal：瀏覽器儘可能地將該字型當作非彩色字型進行渲染，並選擇一個最適合閱讀的配色方案。瀏覽器在做決策時還可能將當前設定的字型顏色color加入決策條件中。還有可能自動生成一組未內建在字型中的配色方案進行渲染。
  • light：一些彩色字型在其後設資料中標明某個配色方案適用於亮色（接近於白色）背景中。使用此數值，瀏覽器將會直接使用標記了該特性的首個配色方案進行渲染。如果字型檔案格式無後設資料或時後設資料中未標記相應的配色方案，那麼此時該數值的行為與 normal 相同。
  • dark：正好與light 相反。
  • 自定義：上面我們介紹了三種基本的配色選擇，那麼如果要使用其他的配色方案或是要自定義，我們將要藉助接下來介紹的@font-palette-values的幫助。

示例：

h1 {
    font-family: Segoe UI Emojil
    font-palette: light
}
複製程式碼

自定義字型配色：@font-palette-values

@font-palette-values用於定義指定字型的配色規則。它允許開發者不僅可以自由選擇字型內建的各種配色方案，還能自定義配色方案。而font-palette選擇自定義配色方案也是通過本規則設定。

它的基本定義規則是@font-palette-values name，name 為本配色規則的自定義名稱。

下面通過其中的三個關鍵屬性進行解釋。

font-family

首先，在為字型設定配色時，我們先要指定這些配色資訊是設定在哪個字型上的。通過font-family即可將當前配色配置繫結到某個字型上。

@font-palette-values Snow {
    font-family: TriColor;
}
複製程式碼

base-palette

在作者製作彩色字型時，往往內建了很多種字型配色，儲存這些資訊時，每個不同的配色方案有自己對應的 id，或者叫做 index。使用 base-palette 進行選擇。

@font-palette-values Snow {
    font-family: TriColor;
    base-palette: 5;
}
複製程式碼

color-x

CSS 字型新玩法之彩色字型

圖片來源 typography.guru

上圖展示了 COLR 對字形的分層。 COLR 將字形的多個部分分為多個圖層，並按照特定的順序將圖層合併成為一個完整的字型。每一個圖層都由 CPAL 中的配色資訊進行上色。為了達到更強大的自定義效果，標準中使用 color-x 屬性提供對特定圖層顏色進行復寫的能力。其中的 x 即為圖層 id。

@font-palette-values RedSnow {
    font-family: TriColor;
    base-palette: 5;
    color-1: rgb(255, 0, 0);
}
複製程式碼

上述例子展示瞭如何通過 color-x 對圖層顏色進行復寫。通過 base-palette: 5 選取自帶的配色，並通過 color-1: rgb(255, 0, 0) 將該配色中 id 為1的圖層顏色修改為紅色。

Level 4 其他值得注意的新屬性

font-min-size, font-max-size

與屬性名稱描述的一樣，這兩個屬性將限制font-size最終的數值。如果font-size的計算值超出設定的最大和最小值，font-size的最終數值將會被直接修改為 font-min-size或font-max-size。 這對於響應式設計來說是比較有用的，將字型大小限制在一個範圍，使得字型不會變的過大或過小。

總結

Fonts Module Level 4 中有趣的新功能還是挺多的，具體效果和標準改進得等各大瀏覽器開始慢慢支援才能知道，讓我們拭目以待吧。

文內連結

  1. https://docs.microsoft.com/en-us/typography/opentype/spec/otff
  2. https://www.w3.org/TR/2018/CR-css-fonts-3-20180626/
  3. https://www.w3.org/TR/css-font-loading/
  4. 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/
  • typography.guru/journal/win…
  • https://www.colorfonts.wtf/

致謝

感謝李鬆峰老師、高峰、劉觀宇、安佳對本文章做出的修改建議。

相關文章