CSS 字體新玩法之 Color Font

時間 2019-12-06

標籤 css 字體玩法 color font 欄目 CSS 简体版

原文原文鏈接

爲何要使用彩色字體

若是大家設計師想在某些特別的專題活動中使用下圖的字體做爲標題字體進行展示，怎麼辦呢？作成圖片咯。而後你可能會遇到這幾個問題：不一樣屏幕下的適配，要是隻作一種尺寸的圖，放大或縮小後的效果都不太好。直接作成 SVG？好像不能複製到 Word 裏面加粗啊，也就是說，這種作法使得這些「文字」自己失去了真實文字該有的能力。css

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

Playbox by Matt Lyon瀏覽器

什麼是彩色字體（Color Font）

初識彩色字體

在咱們所熟知的傳統字體中，字體文件自己僅僅描述了字體的外形特徵，這些特徵通常包含着矢量的輪廓數據或是單色調位圖數據。在瀏覽器渲染單色字體時，渲染引擎使用設定的字體顏色填充字形區域，最後繪製出對應文字及其設定的顏色。而彩色字體中，不只僅存儲了字體的外形特徵，還保存了顏色信息，甚至還能在字體中提供不一樣的配色，增長了靈活性的同時也更具豐富的外形細節。字體

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

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

彩色字體的實現標準

在彩色字體設計的發展歷史上，因爲各家有本身的實現方案，致使在 OpenType 字體中嵌入的色彩信息標準也不盡相同。在最新的 OpenType 標準中 ¹，就有多達四種彩色字體數據的描述格式。spa

SVG，由 Adobe 和 Mozilla 主導的矢量字體標準。其中不只包含了標準的 TrueType 或 CFF 字形信息，還包含了可選的 SVG 數據，容許爲字體定義顏色、漸變甚至是動畫效果。SVG 標準中的配色信息也將存儲在 CPAL 中。設計
COLR + CPAL，由微軟主導的矢量字體標準。其中包含 COLR 即字形圖層數據和 CPAL 配色信息表，對其的支持集成在 Windows 8.1 及以後的版本中。code
CBDT + CBLC，由 Google 主導的位圖字體標準。其中包含了 CBDT 彩色外形位圖數據和 CBLC 位圖定位數據，對其的支持集成在 Android 中。orm
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派發不一樣格式字體作兼容麼？告辭！

少俠且慢！

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

字體模塊標準的現狀

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

CSS Fonts Module Level 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

圖片來源 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。這對於響應式設計來講是比較有用的，將字體大小限制在一個範圍，使得字體不會變的過大或太小。