官网显示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文件的引入,所以至少要打包四个文件到项目中,就不会报错了!如图所示四个文件: