Anicons 是 Google Design 和 Typogram 合作推出的全球第一款彩色圖示字型，它是目前最先進的兩種字型技術 -- 可變字型和彩色字型的結合的首次實踐。

Anicons 字型自帶時間軸，包含了位移、顏色變換、縮放等效果，可以安裝在電腦上在設計時使用，也可以嵌入 HTML 網頁中，通過簡單的 CSS 就能定義動畫。本文將介紹 Anicons 字型在設計時（以 Adobe XD 為例）和在 HTML 中如何使用，非專業的那種。

下載和安裝

通過 Anicons 字型的官網可以下載到 Anicons 字型包。

下載的 Anicons 字型包解壓後

下載並解壓之後你會得到多個資料夾，其中“Anicons_static”資料夾中的 6 個字型用於在本地電腦安裝，直接多選安裝即可。“Anicons_variable”資料夾中是可變字型用於在 HTML 中使用，“Anicons_webfont_kit”資料夾中則是在 HTML 中使用的包含 CSS 的套件。

在設計中使用

以在 Adobe XD 中使用為例，安裝完“Anicons_static”資料夾中的 6 個字型後，你可在 Adobe XD 的屬性檢查器的“文字”中的字型列表中找到“Anicons Static”和“Anicons Color Static”。

其中“Anicons Static”是常規字型，選擇之後有兩個字重分別是“Start”和“End”，而彩色字型“Anicons Color Static”則有 4 個字重，多了“Layer 0”和“Layer 1”。“Start”和“End”其實分別是該字型開始和結束時的狀態，“Layer”是圖層，因為有顏色的字型不同顏色的元素是放在不同的圖層上，2 種顏色就有了 2 個圖層。

使用圖示字型，我們不可能直接輸入圖示，需要使用其它字元來代替，Anicons 字型是輸入大小寫英文字母、數字、符號，比如在文字框中輸入“a”，選擇 Anicons 字型實際顯示的是漢堡選單圖示，輸入“h”是三角形圖示，輸入“i”是播放按鈕圖示，輸入“u”是點贊圖示。

Anicons 字型字元對照表

在 HTML 中使用

你可以選擇將字型託管在自己的伺服器上，想要直接嘗試可以直接引用官方的 CSS，常規字型使用以下程式碼：

<div class="icon">A</div>

接下來你需要指定字型：

font-family: "Anicons Regular", sans-serif;font-family: "Anicons Color", sans-serif;

然後可以加 CSS 和滑鼠經過效果：

.icon {  font-variation-settings: "TIME" 1;  transition: font-variation-settings 0.4s ease;}.icon:hover{  font-variation-settings: "TIME" 100;}

現在，你已經可以擁有滑鼠經過的效果：

其中 font-variation-settings 用來設定字型的變化規律，下圖是“A”漢堡選單圖示的"TIME"的值分別為 1、10、20、······ 90、100 的狀態（從左往右從上往下排序）：

你也可以使用 @keyframes 動畫定義動畫，CSS 的 @keyframes 和 animation 可自行了解：

@keyframes icon-animation {    0% { font-variation-settings: "TIME" 1; }  100% { font-variation-settings: "TIME" 100; }}.icon {  animation: icon-animation .5s ease-in-out infinite;}

如果你需要將字型託管在自己的伺服器上，可以直接拷貝前面下載解壓後的“Anicons_webfont_kit”，我的目錄是這樣的：

index.html 的程式碼如下：