起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure 教程：輕松導(dǎo)出圖標(biāo)字體所有圖標(biāo)
近幾年圖標(biāo)字體使用非常廣泛，它的優(yōu)點(diǎn)是可以自定義圖標(biāo)顏色、大小等參數(shù)，且圖標(biāo)不會失真。本文將教你輕松導(dǎo)出圖標(biāo)字體中的所有圖標(biāo)，任你所用。
一、問題來源
最近在集中整理一些原型、元件、框架或者素材等設(shè)計(jì)規(guī)范，在整理的過程中，遇到一個比較棘手的問題：當(dāng)在 Axure 中選擇一個圖標(biāo)字體時，沒有辦法直接通過字符，將我們想要的圖標(biāo)打出來。
例如如果想在 Axure 中使用“加號”的字體圖標(biāo)時，只有三種方法能搞定：
- 辦法 1：從其他的圖標(biāo)字體庫中直接復(fù)制粘貼；
- 辦法 2：從系統(tǒng)字體中復(fù)制粘貼；
- 辦法 3：導(dǎo)出該字體圖標(biāo)的 svg/png 圖片文件，再復(fù)制粘貼。
盡管這三種方式都能滿足正常使用的需求，但對應(yīng)的也會存在三個問題：
- 問題 1：很難找到其他全面的圖標(biāo)字體庫文件
- 問題 2：系統(tǒng)字體庫中只能單個復(fù)制，無法批量復(fù)制，工作量太大
- 問題 3：svg/png 圖片下載后無法隨意改變圖標(biāo)顏色或大小，不方便制作交互樣式
所以這些問題的出現(xiàn)產(chǎn)生了一個需求：如何將圖標(biāo)字體中的所有字體批量導(dǎo)出到 Axure ，變成一個個可以直接編輯的字體圖標(biāo)？
本文將以知名圖標(biāo)字體 Ionicons V5.0.0 為例，來跟大家介紹一種簡單直接的方法，巧用百度字體編輯器來輕松批量導(dǎo)出。
二、解決辦法
2.1 預(yù)覽復(fù)制
首先可以在 Ionicons 官網(wǎng)下載字體 TTF 格式字體文件。下載完成后，打開百度字體編輯器 FontEditor ，直接將剛才下載的 TTF 文件拖入編輯窗口。
在正常文件沒有損壞的情況下，拖入后編輯器會直接顯示所有字體中的圖標(biāo)：
此時如果沒有其他特殊的需求，一般不需要對任何圖標(biāo)做格式或形狀上的處理，直接點(diǎn)擊右上角預(yù)覽按鈕，選擇預(yù)覽 TTF 文件即可。
例如下圖就是預(yù)覽后的頁面，可以看到這個頁面就可以直接批量復(fù)制了，也就解決了上述第二個沒辦法批量復(fù)制的問題：
注意，不要忘記復(fù)制到 Word 后，需要選擇對應(yīng)的字體格式才能正常顯示字體圖標(biāo)。
2.2 集中處理
通過 2.1 節(jié)的操作后，我們已經(jīng)將所有字體圖標(biāo)復(fù)制到 Word 中了。但可能由于字體文件的設(shè)置或者 FontEditor 的預(yù)覽規(guī)范，會發(fā)現(xiàn)復(fù)制后圖標(biāo)下方會有圖標(biāo)名稱和圖標(biāo)十六進(jìn)制代碼，而且每一行只有一個圖標(biāo)，十分不方便查看。
顯然，此時不可能挨個去每行編輯，畢竟可能有成千上萬行，那如何批量處理格式呢？這就要體現(xiàn) Word 的強(qiáng)大了，我們可以通過高級替換功能輕松搞定。
這里用到的高級替換有兩種：
- 換行替換：處理掉換行；
- 通配符替換：處理掉具有規(guī)律的文本。
先來看換行替換，在 Word 中，換行符也就是段落標(biāo)記是 ^p ，我們只要替換成空即可（注意并不是替換成空格）：
可以看出，替換后已經(jīng)處理掉了所有的換行，還剩下一些不需要的文本。仔細(xì)觀察文本后發(fā)現(xiàn)，文本具備一定的規(guī)律性，顯然可以通過正則通配符批量處理。
首先需要根據(jù)規(guī)律文本，分析后得出具體的正則通配符公式（多一個 \ 是轉(zhuǎn)義符），具體正則語法不是文章重點(diǎn)，此處不展開說明：
此時再利用 Word 的通配符替換方法，直接替換成空即可。從下圖可以看到我們得到了想要的最后的可復(fù)制格式：
當(dāng)然，此步驟可能由于文件的不同、預(yù)覽格式的不同或者各人需求的不同，可能存在一些步驟上差異。但沒關(guān)系，只要處理到符合你自己的需求標(biāo)準(zhǔn)即可。
2.3 最后優(yōu)化
當(dāng)完成 2.2 后其實(shí)就可以直接從 Word 復(fù)制到 Axure 中了。當(dāng)然，如果對排版有特殊要求時，可以利用 Axure 的行間距和字間距直接處理：
還可以根據(jù)需要設(shè)置多個顏色的圖標(biāo)，適用不同的場景：
此時我們就有了 Ionicons 圖標(biāo)字體中的所有圖標(biāo)，解決了開頭說的所有問題。
總結(jié)
在動手解決這個問題前，咨詢了很多的大牛，給出的建議都是直接使用圖片。但只要花心思，沒有問題是解決不了的，而且解決問題本身就是一個學(xué)習(xí)和動手過程。從解決流程中，也可以看到其實(shí)利用了不少工具和方法。
總的來說，通過這個方法可以輕松搞定所有的圖標(biāo)字體庫。既能方便平時產(chǎn)品原型設(shè)計(jì)時的使用，也能快速制作和積累自己的設(shè)計(jì)庫。
作者：iamxiarui；公眾號：大話產(chǎn)品經(jīng)理（dahuapm），試圖用輕松的方式，聊聊產(chǎn)品經(jīng)理這回事。
本文由 @ iamxiarui 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
你好，字體在word處理以后，怎么導(dǎo)入到axure呢？
直接復(fù)制粘貼即可
在 Ionicons 官網(wǎng)下載字體 TTF 格式字體文件，找不到ttf文件
你好，在這里，https:去//github.com/ionic-team掉/ionicons/blob/master/d漢ocs/fonts/ionico字ns.ttf，他放在這里面。