在网页中引入图片字体教程

在网页中引入图片字体

可以看到红色框框里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”；的引入。