持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

背景

在前端项目中，设计师给出一张设计稿要求里面的五花八门的字体都要前端实现，
但是我们前端有的字体就那些个：微软雅黑..... 并没有设计师要求的那些字体。 怎么办呢？
可以引入外部的字体或者字体图标在自己的项目中使用。

找个外部字体或者字体图标资源

我们先找一个字体或者字体图标的资源网站供我们使用，我们用阿里巴巴的字体网站，链接是这个 ：阿里巴巴的字体网站 ；
之前这个网站是有个阿里巴巴普惠体的，现在是升级的原因还是什么的，找不到了；
所以我们就用字体图标玩一波，看这些好看的字体图标怎么接入我们的项目中的；
看了本文章后，这个外部的字体图标你学会怎么用到项目里；
以后你可以找其他的外部字体资源或者图标什么的，也就差不多会用了，思路是一样的，只不过每个外部资源它本身的格式写法的有所不同。

下载资源

因为需要进入项目再项目里添加字体图标，然后整体下载，我们一步一步来：

新建一个项目

我们先下载资源，进入网站，然后登录，登录后，进入我的项目；

进来后，同学们要先新建一个项目：

然后填写里面的信息：

如果只是用里面的图标就直接点击新建，里面项目名称什么的用默认的就好了，如果管理项目的话项目名称、描述的就自己填一填；
表格里的前缀，和 Font Family 在项目里使用的时候会用到；
字体格式，基本就是那选中的3个格式，默认选中下载下来的； 新建好项目之后，在我的项目中会出现自己所有的项目；

项目里添加图标

现在开始给自己项目添加图标，然后整体下载；
我们先在素材库里找自己想要的字体图标，也可以搜索自己想要的；

我用的是首页的一个图标库，进入图标库，把想要的那些图标添加到购物车里；

加完自己想要的图标之后，点击右侧的购物车图标，进入下面这个页面， 点击添加至项目按钮，然后选择自己需要的添加的项目，然后点击确定；

整体下载资源

然后就会跳转到自己的项目里，可以看到自己刚才添加的图标，最后点击下载至本地；

下载完成后，然后解压文件，下面就是我解压后拿到的文件：

demo.css就是代码css的范例,demo_index.html直接打开就是如何使用的详情，说的特别细，其他的css,woff什么的就是字体图标的需要引入的资料文件。
demo_index.htm打开是这样的：

结尾

今天就先写到这里，大概就写了外部资源如何下载下来，然后里面都有什么，下篇文章，我会实操一下，外部的资源如何接入到项目里使用，以及如何配置。明天更文哦。