css3@font-face的使用方法
【摘要】 使用字体图标的优点为：
矢量（无限缩放、高清）
CSS 样式（通用、灵活）
体积更小（快速）
使用字体图标的优点为：
矢量（无限缩放、高清）
CSS 样式（通用、灵活）
体积更小（快速）
有优点必然有缺点，缺点是后期加入新的字体图标麻烦点，不过新的技术当然还是得使用啦~
下面就来说说使用方法：
1.这里推荐阿里巴巴字体图标库(https://www.iconfont.cn/)；
2.进入阿里巴巴字体图标库网站首页，登录，没有账号先注册一个；
3.在输入框里输入名字（名字可以是中文，英文，拼音都行），比如我这里输入的是“爱心“，回车后如下图：
4.找到自己喜欢的图标，鼠标移上去，会出现一个购物车的图标，点击会加入到右上角的购物车（前提是要登录哦~）
如下图，右上角的购物车上显示1，代表加入了一个图标……
5.点击右上角购物车，这时浏览器右边显示一个侧栏，我们添加的图标就在这里呀，如下图：
6.可以看到，上图有三个按钮，添加至项目，下载素材，下载代码；分别是什么意思呢？
添加至项目：可以理解为一个网站上用到的所有图标代表一个项目
下载素材：直接下载当前的图标，可以设置图标的颜色，大小，图标格式有SVG、AI、PNG
下载代码：这个是今天的重点，以css3@font-face方式引入字体文件。
7.首先下载代码，解压之后，如下图：
其中里面重点是是:iconfont.css、iconfont.ttf，这两个文件是会使用到的。
8.新建一个文件夹，名字随意，比如我这里是demo名字，将iconfont.css和iconfont.ttf复制到demo文件夹里，然后新建一个index.html页面，目录结构如下图：
我们打开iconfont.css，看到的如下图：
把iconfont.css文件里的一些不需要的东西去掉，@font-face里引入了多个字体，我们这里只用到了ttf格式的，还有一个很长一串的base64格式的需要保留，这里其它的都可以去掉，最终如下图：
准备工作做完了，下面我们来看看怎么使用吧？
9.使用方法：
我们在刚刚新建的index.html里，在<head>标签里，引入iconfont.css,如下图：
引入之后我们还记得刚刚下载的字体图标文件夹里有个demo_index.html的文件吗？，我们双击文件浏览器打开，显示如下图：
可以看到这里也有使用说明，我们等到Font class，使用class方式，如下图：
上图有一个.icon-aixin的类名
下面在html标签里使用，如下图：
这里注意，i标签里有两个类名，iconfont是必须的，icon-aixin是具体的图标，不过这个颜色爱心的图标有点问题…………
我这为了演示，换一个图标，第一个，如下图：
打开浏览器可以看到：（加了颜色和大小）
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
热门文章
评论（0）