<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_3730320_ivn9suva91e.css">
</head>
<style>
/ CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 /
@font-face {
font-family: ‘iconfont’; / Project id 3730320 /
src: url(‘//at.alicdn.com/t/c/font_3730320_ivn9suva91e.woff2?t=1666763560453’) format(‘woff2’),
url(‘//at.alicdn.com/t/c/font_3730320_ivn9suva91e.woff?t=1666763560453’) format(‘woff’),
url(‘//at.alicdn.com/t/c/font_3730320_ivn9suva91e.ttf?t=1666763560453’) format(‘truetype’);
}
.iconfont.test {
/ 声明字体的名称 /
font-family: iconfont;
/ 声明其它字体属性 /
font-size: x-large;
color: pink;
/ 加阴影 /
text-shadow: 1px 1px 1px #888;
}
/ class 引用字体图标的用法 /
.iconfont.test2{
font-family: iconfont;
color:red;
font-size: x-large;
}
</style>
<body>
<div class="iconfont test">
<span></span>
</div>
<div class="iconfont test2"><span class="icon-kefufill"></span></div>
</body>
<body>
<button class="btn xiao">按钮1</button>
<button class="btn zhong">按钮2</button>
<button class="btn da">按钮3</button>
<style>
html {
font-size: 10px;
}
.btn {
background-color: red;
color: yellow;
border: none;
outline: none;
}
.btn:hover{
cursor: pointer;
opacity: 0.8;
}.btn.xiao{font-size: 1.4rem;}.btn.zhong{font-size: 1.8rem;}.btn.da{font-size: 2.2rem;}/* 媒体查询的宽度顺序:1. 移动端: 从小往大写2. PC端: 反过来写,从大向下写 *//* 移动端媒体查询 *//* 当屏幕小于380px */@media (max-width:38rem){html{font-size: 20px;}}/* 380px - 420px */@media (min-width:38rem) and (max-width:42rem){html{font-size: 30px;}}/* 420px以上 */@media (min-width:42rem){html{font-size: 40px;}}</style>
</body>
</html>