方法:
1.在icomoon字库网站上下载完了字体之后,将压缩包解压
2.将压缩包中的font文件夹,拷贝到所需使用的样式表文件同路径下(下面引用的时候,没有加../到上级目录)
就是@font-face的url地址要注意,他的作用就是找到导入的font文件夹
3.将压缩包中的css文件内容部分拷贝到自己的样式表中(看源码)
4通过font-family:"icomoon"引用,打开压缩包的html文件将图标右下角矩形选中,ctrl+c复制在引用时粘贴
5.通过压缩包里面的json格式的文件,可以追加字体文件
文件的路径:
html格式文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?4mm4qn');
src: url('fonts/icomoon.eot?4mm4qn#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?4mm4qn') format('truetype'),
url('fonts/icomoon.woff?4mm4qn') format('woff'),
url('fonts/icomoon.svg?4mm4qn#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* 这里注意url地址前面没有加../这种到上级目录,如果引用不成功很可能是这里出错。*/
span,em,i{
font-family: "icomoon";
font-size: 100px;
font-style: normal;
color: #CB2A0F;
/*有些浏览器可能上面字体倾斜样式不起作用,还是需要默认添加*/
}
</style>
</head>
<body>
<span></span>
<em></em>
<i></i>
<!-- 通过压缩包里面的html打开,对应的图形下面右边小矩形ctrl+c快捷键复制,这里粘贴 -->
</body>
</html>
效果: