小册《从 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了，具体怎么转你们自行百度吧。

接着写个人小程序去了，后续有坑接着填