Color Fonts，多彩字體是近兩年頻繁出現的設計語匯，越來越多的設計項目當中，開始使用這一技術，盡管目前它依然處于起步階段。

諸如Adobe Typekit 這樣的字體服務供應商，已經開始提供一些支持特定瀏覽器的多彩字體。也正是因為多彩字體使用范圍越來越廣泛，才有設計師預測，它會成為網頁設計領域的“Next Big Thing”。

作為一個植根于網頁設計領域的設計趨勢，多彩字體到底有著什么樣的特征？今天的文章，我們一起來聊聊這個話題。

什么是多彩字體

顧名思義，多彩字體（Color Font），字體本身所包含的不僅僅是外觀形體的特征，不同的區域可以以不同的色彩來呈現，甚至包含陰影、漸變、紋理和透明度等屬性。這些時髦的屬性不僅賦予了字體復雜多變的色彩，而且讓它具備更加豐富的細節。

多彩字體包含了常見字體中應有的矢量形狀或位圖信息，或者兼而有之，這使得多彩字體的字體文件要比普通的字體更大。如果你對于多彩字體沒有太多概念，那么你想想我們用過的圖標字體和表情字體，它們就是多彩字體的一種。同時，我們常用的字體通常被稱為 Chromatic Font ，也就是“有色的字體”，因為它們通常只能包含一種色彩。

不過，多彩字體還存在問題，最大的問題在于目前并沒有一套通行的字體標準。使用類似SVG的矢量文檔的還好，而使用位圖格式的多彩字體，字體文件大小則會隨著字體尺寸的增大而膨脹。

目前常見的多彩字體包含下面的5種格式：

·SBIX（Apple）：在macOS 和 iOS系統上的原生位圖字體
·CBDT（Google）：在Android 系統上使用的原生位圖字體
·COLR（Microsoft）：在Windows 8.1+ 系統上使用的矢量字體
·SVG（W3C）：有矢量和位圖兩種版本
·OpenType SVG（Adobe/Mozilla）：將矢量和位圖版的SVG文檔置于 OpenType 字體中而構成的字體

另一方面，許多使用多彩字體的企業機構正在逐步完善它們旗下的字體格式的標準和使用規范。Mozilla（Firefox背后的支持機構）和Adobe 已經正式聲明了 OpenType SVG 為它們多彩字體的首選格式。當它們作出決策的時候，其他企業尚處于觀望階段。

如果你現在想著手了解多彩字體本身，那么Fontself 的這篇文章應該可以幫你入門。

多彩字體怎么用？

當你第一次看到多彩字體的時候，通常會出現兩種反應：

·臥槽好惡心!
·牛逼，我知道要在什么地方用它了！

無論你的反應是哪種，都無法忽略一個事實：有許多APP和網站都非常適合多彩字體來發揮作用。不過，當你在使用它們的時候，要足夠謹慎，也合乎情理。

在下面的情形下，你可以嘗試使用多彩字體：

·想用一個短語抓住用戶注意力
·使用圖標或者LOGO樣式元素的時候
·大量文本內容開頭的大寫字母/大寫單詞
·給極簡主義設計中作為視覺主體的標題使用
·大塊文本當中某個或者某幾個需要吸引用戶注意力的單詞
·當整個設計的其他部分都比較簡單的時候
·當排版是整個設計最主要的視覺元素的時候
·當整個設計項目需要一些更加不同尋常的設計來吸引用戶的注意力的時候

何時避免使用多彩字體

當色彩使用過多時候，常常會讓整個設計看起來像是80年代末的流行設計。如果你不想讓過多的色彩使用對于整個設計產生過大的影響，那么就要謹慎控制多彩字體的使用。在下列情況下，要注意：

·當字體的背景是圖片的時候
·背景的視覺設計較為復雜的時候
·只有大量的文本內容的時候
·當頁面中包含大量的動畫和動效，或者其他元素包含了大量色彩的時候
·已經在頁面的其他地方使用了新奇特殊的字體

多彩字體設計趨勢

實際上，從一開始排版設計就從多彩字體中獲利。Adobe 和Mozilla 所推行的 OpenType SVG 格式可能是目前對多彩字體推動最大的一種格式。Adobe 最近甚至已經開始為Photoshop 更新了對這一字體的支持。

Adobe 對于 OpenType SVG 的闡述是這樣的：

“OpenType-SVG 是一種包含了全部或部分字母/字形的SVG 圖形，它使得單個文字可以顯示多種色彩甚至漸變。正式因為它的這一特性，我們將OpenType-SVG 格式字體命名為多彩字體。”

“OpenType-SVG 字體和普通字體一樣，直接拿來使用，可以編輯，搜索和索引。同時，其中還包含了可供替換的字形，這一點和 OpenType 是一致的。”

“諸如 Trajan Color Concept 和 EmojiOne Color 這樣的字體已經擁有了可供編輯的色彩屬性，如果你的字體工具支持它們的話，就可以正常顯示且可編輯。如果工具對于多彩屬性并不支持的話，它依然可以作為普通字體來使用，不過只能以純色的形式來展現。”

除此之外，The State of Web Type 中詳細闡明了多彩字體需要哪些瀏覽器的功能支持。

在多彩字體的演變和使用上，有兩個主要的影響因素：

·瀏覽器對于網頁設計項目中多彩字體的兼容性
·設計項目的對于華麗多彩的文本在風格上的匹配性

上手試試

如果你確定多彩字體是你的設計項目所需要的東西，那么你可以選擇現成的多彩字體來進行調整，也可以根據現有的普通字體來進行重設計，當然，這主要取決于你所進行的設計項目的類型。

自制多彩字體

制作多彩字體的方法有很多，這主要看你使用什么樣的軟件。多彩字體所能承載的元素很多，它可以是一張漂亮的圖片的一部分，也可以是你用筆繪制出來的元素。你完全可以使用你熟悉的工具來玩趁多彩字體的設計。

·Fontself 是一款AI 和 PS 可用的插件，可以幫你更方便創建多彩字體
·你也可以參考 Glyphs 的教程從頭開始繪制多彩字體
·FontLab 有一個視頻教程，為你介紹整個設計過程

下載使用

當然，現在還有一些現成可用的多彩字體供你學習和使用：

·Type with Pride
·Beach Towel
·Bungee
·Watercolor Font
·Bixa Color
·Kids Toys
·OneLine Bold
·Guru
·Neon

結語

在海報和平面設計中，多彩字體的使用有著極大的需求。不過數字化的網頁也開始越來越多地擁抱這種設計元素，這也是為什么它會成為一種設計趨勢。

【2017年的設計趨勢都在這里】

1. 《作為8年DRIBBBLE粉，和設計師聊聊未來的視覺趨勢》
2. 《PS教程！教你打造2017年最受歡迎的漸變幻彩風格》
3. 《趨勢搶先知！2017年設計師都在討論的服務設計到底是什么？》
4. 《2017年，這5個網頁設計風格可能會成為主流趨勢》

原文地址：designshack
原文作者：CARRIE COUSINS
優設譯文：@陳子木

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com