網頁設計中多彩字體的特徵

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

結語

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

文章來源：http://www.haitaoit.com