可以看到红色框框里i标签里边的一个矩形框，这个矩形框实际上就是第一个红色框里的
这个符号。这个符号仍然拥有字体样式的一些属性，我们也可以对它进行大小，加粗，倾斜等一系列的样式处理。这就是我们常说的字体图片。
那么我们的字体图片是怎么引进我们网页中来的呢。
这些图片其实都是我们通过网站来引进我们的网页中的
推荐给大家几个比较好用的网站：
https://icomoon.io/ 图标字体和svg图标集（国外的网站，打开i可能会比较慢）
https://iconfont.cn/ 阿里巴巴矢量图标库
我们以https://icomoon.io/给大家举个例子把：
这是网站的首页，我们点击
出现了好多小图标，我们随便选择几个，大家到时候如果需要的话可以直接在search框内进行搜索自己想要的图标
点击generate font 后，在下一个页面点击
大家在弹出来的选择框内选择自己想要保存的地址
我将他直接保存在了桌面上
将它解压，解压后会出现一个文件夹
大家将这个fonts文件夹复制，粘贴到自己的demo的文件夹里边
然后我们打开上边文件夹里的demo.html
这些就是我们刚才添加的字体
接下来我们把自己需要引入的图标后边的小框框复制，粘贴到自己的代码里
这样就结束了吗？
没有，来我们在进行最重要的一步
我要评论
@font-face {
font-family: 'icomoon';
/* 字体的来源 */
src: url('fonts/icomoon.eot7kkyc2');
src: url('fonts/icomoon.eot7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf7kkyc2') format('truetype'),
url('fonts/icomoon.woff7kkyc2') format('woff'),
url('fonts/icomoon.svg7kkyc2#icomoon') format('svg');
font-weight: normal;
/* 加粗字体边正常 */
font-style: normal;
/* 倾斜字体变正常 */
}
这些代码就是我们所引入的icomoon的css初始化样式，大家只要复制粘贴即可
最后一步：
span {
font-family: 'icomoon';
font-size: 100px;
color: pink;
}
我们得告诉，我们的font-family是icomoon的，这样一来我们就可以实现我们想要的效果了
ico图标是ui专门做出来的矢量图，大家可以对其像文字一样处理。
最容易忘记的地方就是要引入ico默认的css初始化样式了，还有font-family：“icomoon”；的引入。
如对本文有疑问， 点击进行留言回复！！
荐 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
网友评论