1 进入网站 https://icomoon.io/app/#/sele… 下载字体
2 将下载下来的文件解压,将 fonts 文件夹放入我的项目根目录
3 拷贝 style.css 文件中的 ”@font-face” 对象拷贝进 style,援用字体
@font-face {
font-family: "icomoon";
src: url("fonts/icomoon.eot?25srv6");
src: url("fonts/icomoon.eot?25srv6#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?25srv6") format("truetype"),
url("fonts/icomoon.woff?25srv6") format("woff"),
url("fonts/icomoon.svg?25srv6#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
4 拷贝字体的特殊符号即可应用,并且特殊字符就是字体,能够设置 font 相干的属性
详情代码如下:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> 字体图标的应用 </title>
<style>
/* 1 进入网站 https://icomoon.io/app/#/select/font 下载字体
2 将下载下来的文件解压,将 fonts 文件夹放入我的项目根目录
3 拷贝 style.css 文件中的 "@font-face" 对象拷贝进 style,援用字体
4 拷贝字体的特殊符号即可应用,并且特殊字符就是字体,能够设置 font 相干的属性 */
@font-face {
font-family: "icomoon";
src: url("fonts/icomoon.eot?25srv6");
src: url("fonts/icomoon.eot?25srv6#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?25srv6") format("truetype"),
url("fonts/icomoon.woff?25srv6") format("woff"),
url("fonts/icomoon.svg?25srv6#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: "icomoon";
font-size: 100px;
color: pink;
}
</style>
</head>
<body>
<span></span>
</body>
</html>