iconfont通过font class引入显示小方块bug

官网显示iconfont (opens new window)通过font class引入有两种方式:

1.直接查看链接用link引入cdn链接 //at.alicdn.com/t/c/font\_3680524\_qjgj55gtmj.css,这个方法没有问题, 注意前面要加http:变成http://at.alicdn.com/t/c/font\_3680524\_qjgj55gtmj.css再引入

如图:img

2.通过下载至本地引入css文件,可是当我引入文件时,图标却显示不出来,显示的是一个小方块,使我备受困惑。

经过我不断地排错后发现,当iconfont下载完后是一个文件夹,里面有html、css、js、json等很多文件,如果只把css文件放入到项目中,就会显示错误,应该放至少除了css文件还有别的文件,这样就不会显示错误了。

iconfont.css中有这样一个代码段:

@font-face {
  font-family: "iconfont";
  /* Project id 3680524 */
  src: url('iconfont.woff2?t=1664438813020') format('woff2'),
    url('iconfont.woff?t=1664438813020') format('woff'),
    url('iconfont.ttf?t=1664438813020') format('truetype');
}
1
2
3
4
5
6
7

由此代码段可见,css文件中也有两个woff和ttf (opens new window)文件的引入,所以至少要打包四个文件到项目中,就不会报错了!如图所示四个文件:

img