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

官网显示iconfont通过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再引入，

如图：

 

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');
}

 由此代码段可见，css文件中也有两个woff和ttf文件的引入，所以至少要打包四个文件到项目中，就不会报错了！如图所示四个文件：