來源：Java聯盟

好久沒有出前端的教程了，今天娜姐給大家出篇 CSS 的教程。大家都知道，一些字體（比如下方字體）想要展示出來，是很麻煩的，如果做成圖片，不同屏幕下的適配，要是隻做一種尺寸的圖，放大或縮小後的效果都不太好。直接做成 SVG？好像不能複製到 Word 裏面加粗啊，所以這個時候就需要用到彩色字體了。

1.什麼是彩色字體（Color Font）

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

（Emoji表情）

通常彩色字體還會包含一些兼容信息，這些兼容信息包含 Unicode 編碼的單色字形數據，使得在一些不支持彩色字體的平臺上，仍然能夠像渲染普通字體一樣將彩色字體的字形渲染出來，達到一種向後兼容的效果。

2.彩色字體的實現標準

在最新的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 中。

3.瀏覽器對各種標準的支持

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

4.選擇字體配色：font-palette

font-palette 有三個內置的參數以及支持自定義配色來達到修改配色方案的效果。

normal：瀏覽器儘可能地將該字體當作非彩色字體進行渲染，並選擇一個最適合閱讀的配色方案。瀏覽器在做決策時還可能將當前設定的字體顏色color加入決策條件中。還有可能自動生成一組未內置在字體中的配色方案進行渲染。

light：一些彩色字體在其元數據中標明某個配色方案適用於亮色（接近於白色）背景中。使用此數值，瀏覽器將會直接使用標記了該特性的首個配色方案進行渲染。如果字體文件格式無元數據或時元數據中未標記相應的配色方案，那麼此時該數值的行爲與 normal 相同。

dark：正好與light 相反

自定義：上面我們介紹了三種基本的配色選擇，那麼如果要使用其他的配色方案或是要自定義，我們將要藉助接下來介紹的@font-palette-values的幫助

代碼示例

h1 {

font-family: Segoe UI Emojil

font-palette: light

}

5.自定義字體配色：@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

上圖展示了 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的圖層顏色修改爲紅色。

這樣，我們就實現了彩色字體的展示了，大家有沒有學會呢？可以在下方留言告訴娜姐，娜姐給你們解答~