小冊《從 0 到 1 實現天氣小程序》跳坑記一

小程序如今已經成爲前端的必備技能之一了，但是我竟然還不會，因而乎先去通讀了小程序的文檔，而後買了掘金小冊《微信小程序開發入門：從 0 到 1 實現天氣小程序》打算跟着大佬實戰一番。不看沒關係，一看之下發現跳了一個大坑，做者說的是從0到1，結果中間跳躍好大，理論篇看着很舒服，可是到了實戰篇就直接懵逼，下面評論一片叫苦。看不懂啊，好吧，那我本身用原生先實現一遍吧，因而直接跳到了實戰第三篇，先寫個icon組件。。。

看了一遍icon組件的實現，發現很簡單嗎，因而開始本身寫，寫着寫着發現不對呀，這個ttf字體文件怎麼來的，我想要本身的圖標字體咋辦呀，因而就有了今天的第一個填坑記錄：

icon組件中使用的icon字體是怎麼來的？

根據做者的提示本身摸索出了icon字體的製做過程。

---

一、在iconfont中下載本身想要的icon代碼

相信你們都知道iconfont，就很少介紹了。

• 先在iconfont中選擇本身心儀的icon加入到庫中

• 這裏要注意，庫中的icon最多一次性只能下載20個。

• 而後在庫中-下載代碼。

• 下載後的壓縮包，解壓後會發現裏面包含了各類文件，咱們要使用的是.ttf文件。

二、在FontEditor製做字體文件

這一步須要用到百度的字體編輯器FontEditor

• 先在編輯器中新建項目，而後選中新建的項目，點擊導入-導入字體文件，找到剛剛下載的.ttf格式的文件導入，若是下載了多個.ttf，依次導入便可。

• 導入後就能夠看到全部導入的圖標了，每一個圖標均可以選中，能夠進行單獨編輯。

• 點擊導入旁邊的TTF導出按鈕，導出生成的.ttf文件，這時候可能會提示Unicode重複，並給出了對應的圖標序號，點擊肯定後會自動定位到Unicode重複的圖標，點擊上方的字體信息，把unicode修改一下便可，而後接着導出，這個過程估計要重複好幾回，知道成功導出爲止。

至此本身製做的字體文件就完成了，終於能夠拿來用了。

---

若是本身用原生方法寫這個icon組件還有一個坑，就是小程序中沒法直接引入外部的字體文件，須要先把字體文件轉成base64之後才能使用，這個時候就須要用到transfonter了，具體怎麼轉你們自行百度吧。

接着寫個人小程序去了，後續有坑接着填