近幾年圖標字體使用非常廣泛，它的優點是可以自定義圖標顏色、大小等參數，且圖標不會失真。本文將教你輕鬆導出圖標字體中的所有圖標，任你所用。
一、問題來源
最近在集中整理一些原型、元件、框架或者素材等設計規範，在整理的過程中，遇到一個比較棘手的問題：當在 Axure 中選擇一個圖標字體時，沒有辦法直接通過字符，將我們想要的圖標打出來。
例如如果想在 Axure 中使用“加號”的字體圖標時，只有三種方法能搞定：
- 辦法 1：從其他的圖標字體庫中直接複製粘貼；
- 辦法 2：從系統字體中複製粘貼；
- 辦法 3：導出該字體圖標的 svg/png 圖片文件，再複製粘貼。
儘管這三種方式都能滿足正常使用的需求，但對應的也會存在三個問題：
- 問題 1：很難找到其他全面的圖標字體庫文件
- 問題 2：系統字體庫中只能單個複製，無法批量複製，工作量太大
- 問題 3：svg/png 圖片下載後無法隨意改變圖標顏色或大小，不方便製作交互樣式
所以這些問題的出現產生了一個需求：如何將圖標字體中的所有字體批量導出到 Axure ，變成一個個可以直接編輯的字體圖標？
本文將以知名圖標字體 Ionicons V5.0.0 為例，來跟大家介紹一種簡單直接的方法，巧用百度字體編輯器來輕鬆批量導出。
二、解決辦法
2.1 預覽複製
首先可以在 Ionicons 官網下載字體 TTF 格式字體文件。下載完成後，打開百度字體編輯器 FontEditor ，直接將剛才下載的 TTF 文件拖入編輯窗口。
在正常文件沒有損壞的情況下，拖入後編輯器會直接顯示所有字體中的圖標：
此時如果沒有其他特殊的需求，一般不需要對任何圖標做格式或形狀上的處理，直接點擊右上角預覽按鈕，選擇預覽 TTF 文件即可。
例如下圖就是預覽後的頁面，可以看到這個頁面就可以直接批量複製了，也就解決了上述第二個沒辦法批量複製的問題：
注意，不要忘記複製到 Word 後，需要選擇對應的字體格式才能正常顯示字體圖標。
2.2 集中處理
通過 2.1 節的操作後，我們已經將所有字體圖標複製到 Word 中了。但可能由於字體文件的設置或者 FontEditor 的預覽規範，會發現複製後圖標下方會有圖標名稱和圖標十六進制代碼，而且每一行只有一個圖標，十分不方便查看。
顯然，此時不可能挨個去每行編輯，畢竟可能有成千上萬行，那如何批量處理格式呢？這就要體現 Word 的強大了，我們可以通過高級替換功能輕鬆搞定。
這裡用到的高級替換有兩種：
- 換行替換：處理掉換行；
- 通配符替換：處理掉具有規律的文本。
先來看換行替換，在 Word 中，換行符也就是段落標記是 ^p，我們只要替換成空即可（注意並不是替換成空格）：
可以看出，替換後已經處理掉了所有的換行，還剩下一些不需要的文本。仔細觀察文本後發現，文本具備一定的規律性，顯然可以通過正則通配符批量處理。
首先需要根據規律文本，分析後得出具體的正則通配符公式（多一個 \\ 是轉義符），具體正則語法不是文章重點，此處不展開說明：
此時再利用 Word 的通配符替換方法，直接替換成空即可。從下圖可以看到我們得到了想要的最後的可複製格式：
當然，此步驟可能由於文件的不同、預覽格式的不同或者各人需求的不同，可能存在一些步驟上差異。但沒關係，只要處理到符合你自己的需求標準即可。
2.3 最後優化
當完成 2.2 後其實就可以直接從 Word 複製到 Axure 中了。當然，如果對排版有特殊要求時，可以利用 Axure 的行間距和字間距直接處理：
還可以根據需要設置多個顏色的圖標，適用不同的場景：
此時我們就有了 Ionicons 圖標字體中的所有圖標，解決了開頭說的所有問題。
總結
在動手解決這個問題前，諮詢了很多的大牛，給出的建議都是直接使用圖片。但只要花心思，沒有問題是解決不了的，而且解決問題本身就是一個學習和動手過程。從解決流程中，也可以看到其實利用了不少工具和方法。
總的來說，通過這個方法可以輕鬆搞定所有的圖標字體庫。既能方便平時產品原型設計時的使用，也能快速製作和積累自己的設計庫。
作者：iamxiarui；公眾號：大話產品經理（dahuapm），試圖用輕鬆的方式，聊聊產品經理這回事。
本文由 @ iamxiarui 原創發佈於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
