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

Anicons 彩色圖標字體動態效果

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 字體的字重

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

輸入 Anicons 字體

當然，小編也為大家貼心的準備了全部字符和不同字體所對應的圖標，下面是全部圖標和字符的對照表（點擊查看大圖）。

Anicons 字體字符對照表

使用 Anicons 彩色字體

在 HTML 中使用

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

<code><link>/<code>

彩色字體使用以下代碼：

<code><link>/<code>

同時使用常規字體和彩色字體使用以下代碼：

<code><link>/<code>

然後在 HTML 中使用圖標字符即可，字符表可參考文中上方的字符表，比如“A”為漢堡菜單圖標：

<code>
A
/<code>

接下來你需要指定字體：

<code>font-family: "Anicons Regular", sans-serif;
font-family: "Anicons Color", sans-serif;/<code>

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

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

  font-variation-settings: "TIME" 100;
}/<code>

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

Anicons 字體鼠標經過效果

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

Anicons 的不同狀態

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

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

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

目錄

index.html 的代碼如下：

<code>


  
  <title>Anicons/<title>
\t<link>
  
\t
\t
    
A

\t
/<code>

閱讀更多 設界 的文章

關鍵字: 首款 字體