Vue2项目本地使用iconfont

需求描述

有一个vue2项目，部署给客户之后发现图标无法加载出来，去问了技术支持才知道，这个项目只在局域网内使用，所以要把图标库都放在本地引用。

本地使用

情景一

如果项目中只使用了一个iconfont图标库，而你也有这个图标库的权限，那就很简单了。

假设项目中引用方式如下：

1
<link href="//at.alicdn.com/t/c/font_3626542_1zfs0h0nwnl.css" rel="stylesheet" type="text/css"/>

你只需要在iconfont里下载整个项目图标，放入到本地引用就可以了。

在这里下载项目代码。

下载完成后解压，得到如下的文件。

将整个目录放入到项目的static/iconfont文件夹中，或其他存放公共资源的目录中。

本地替换直接引入即可。

1
<link href="./static/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>

情景二

如果项目中引入了多个阿里的图标库，而且你也没有图标项目的权限，意味着所有的css文件和字体文件的引用，你都需要自己处理。

假设在项目中，引入了三个图标文件，而且都没有项目的访问权限。

1
<link href="//at.alicdn.com/t/c/font_4111334_yjw2n72sdm9.css" rel="stylesheet" type="text/css"/>
2
<link href="//at.alicdn.com/t/c/font_3626542_1zfs0h0nwnl.css" rel="stylesheet" type="text/css"/>
3
<link href="//at.alicdn.com/t/c/font_2026014_njz87pixc4k.css" rel="stylesheet" type="text/css"/>

我们现在浏览器中打开第一个css的地址，将浏览器中的内容复制到本地的资源目录中，比如static/iconfont/iconfont.css文件中。

1
@font-face {
2
  font-family: "iconfont"; /* Project id 4111334 */
3
  src: url('//at.alicdn.com/t/c/font_4111334_yjw2n72sdm9.woff2?t=1692776471348') format('woff2'),
4
       url('//at.alicdn.com/t/c/font_4111334_yjw2n72sdm9.ttf?t=1/t/c/font_4111334_yjw2n72sdm9.woff?t=1692776471348') format('woff'),
5
       url('//at.alicdn.com692776471348') format('truetype');
6
}
7

8
.iconfont {
9
  font-family: "iconfont" !important;
10
  font-size: 16px;
11
  font-style: normal;
12
  -webkit-font-smoothing: antialiased;
13
  -moz-osx-font-smoothing: grayscale;
14
}
15

9 collapsed lines
16
.icon-gou:before {
17
  content: "\e710";
18
}
19

20
.icon-hujiao1:before {
21
  content: "\e91b";
22
}
23

24
/* 省略内容 */

其它两个css文件也需要同样的操作，重复的字体声明就不需要再复制到iconfont.css文件中了，不要把@font-face 和 .iconfont的内容再往里面复制了。

同样本地还是直接引入这个css文件，修改如下。

1
<link href="./static/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>

就这样操作完了之后，我们把引入的3个阿里图标库的链接改成了引入1个本地的css文件，但是项目目前还不能正常显示图标，因为我们还没有处理引入的字体文件。

注意看iconfont.css的前面几行代码，这里引入的字体文件还是外网地址，需要把这些字体文件也下载到本地使用。

为了更好的兼容性，更建议转换成base64来使用，复制format('truetype'')那一行的url属性中的链接到浏览器中打开，下载对应的ttf字体文件。

1
@font-face {
2
  font-family: "iconfont"; /* Project id 2026014 */
3
  src: url('//at.alicdn.com/t/c/font_4111334_yjw2n72sdm9.woff2?t=1692776471348') format('woff2'),
4
       url('//at.alicdn.com/t/c/font_4111334_yjw2n72sdm9.ttf?t=1/t/c/font_4111334_yjw2n72sdm9.woff?t=1692776471348') format('woff'),
5
       url('//at.alicdn.com/t/c/font_4111334_yjw2n72sdm9.ttf?t=1692776471348') format('truetype');
6
}

打开字体转换文件网站：Base64 Encoder。

选择下载的ttf字体文件上传，转换后的结果复制下来。

根据网站提示，将iconfont.css文件的@font-face引用按如下规则修改一下：

按照如下的规则修改：

1
@font-face {
2
  font-family: "iconfont"; /* Project id 2026014 */
3
  src:
4
    url('data:application/font-ttf;charset=utf-8;base64,[将网站上转换的内容替换到这里来]')  format('truetype');
5
}

这样我们就把原来的css文件的字体引入到本地了，同样我们还得继续操作两次，因为我们总共有三个css文件，各自的ttf文件都需要这样的操作。

但是我们不能把转换的base64结果继续写在同一个@font-face里面，因为会覆盖ttf内容，到最后还是会只引入了一个ttf文件，导致有两个css文件的图标显示不出来。

错误示范

1
@font-face {
2
  font-family: "iconfont"; /* Project id 2026014 */
3
  src:
4
    url('data:application/font-ttf;charset=utf-8;base64,[第一个css文件的字体转换字符串]')  format('truetype'),
5
    url('data:application/font-ttf;charset=utf-8;base64,[第二个css文件的字体转换字符串]')  format('truetype'),
6
    url('data:application/font-ttf;charset=utf-8;base64,[第三个css文件的字体转换字符串]')  format('truetype');
7
}

正确示范

1
@font-face {
2
  font-family: "iconfont"; /* Project id 2026014 */
3
  src:
4
    url('data:application/font-ttf;charset=utf-8;base64,[第一个css文件的字体转换字符串]')  format('truetype');
5
}
6
@font-face {
7
  font-family: "iconfont"; /* Project id 2026015 */
8
  src:
9
    url('data:application/font-ttf;charset=utf-8;base64,[第二个css文件的字体转换字符串]')  format('truetype');
10
}
11
@font-face {
12
  font-family: "iconfont"; /* Project id 2026016 */
13
  src:
14
    url('data:application/font-ttf;charset=utf-8;base64,[第三个css文件的字体转换字符串]')  format('truetype');
15
}
10 collapsed lines
16

17
.icon-gou:before {
18
  content: "\e710";
19
}
20

21
.icon-hujiao1:before {
22
  content: "\e91b";
23
}
24

25
/* 省略内容 */

到这我们就大功告成啦！