一、字体图标的引入

1.1 unicode和fontclass引入

HTML文件

    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/css1.css">
    <title>引入字体iconfont</title>
    </head>
    <!-- 1、unicode引入：css文件引入Unicode代码 -->
    <div class="my-font">
        <span>&#xe6a2;</span>
        <span>&#xe68d;</span>
    </div>
    <!-- 2、fontcss引入：css文件引入css链接 -->
    <div class="iconfont">
        <span class="icon-yonghutianchong active"></span>
    </div>
    <div class="iconfont">
        <span class="icon-shezhitianchong active"></span>
    </div>

css.css文件

/*1、unicode引入*/
@font-face {
    font-family: 'user_iconfont';  /* Project id 3884767 */
    src: url('//at.alicdn.com/t/c/font_3884767_x7v7y9uy9zm.woff2?t=1675783006602') format('woff2'),
         url('//at.alicdn.com/t/c/font_3884767_x7v7y9uy9zm.woff?t=1675783006602') format('woff'),
         url('//at.alicdn.com/t/c/font_3884767_x7v7y9uy9zm.ttf?t=1675783006602') format('truetype');
  }
.my-font {
    font-family: user_iconfont; font-size: 3em; color: blue;
}

css1.css文件

/*2、fontcss引入*/
@import url('http://at.alicdn.com/t/c/font_3884767_x7v7y9uy9zm.css');
.active {
    font-size: 3em;
    color: seagreen;
}
.active:hover {
    font-size: 4em;
    color: lightgreen;
    cursor: pointer;
    transition: 0.5s;
}

1.2 下载本地引入

<!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">
    <link rel="stylesheet" href="css/iconfont.css">
    <title>下载本地引入字体iconfont</title>
</head>
<body>
    <!--3、下载本地引入-->
    <div class="iconfont">
        <span>&#xe6a2;</span>
    </div>
</body>
</html>

@font-face {
  font-family: "iconfont"; /* Project id 3884767 */
  src: url('../font/iconfont.woff2?t=1675818606114') format('woff2'),
       url('../font/iiconfont.woff?t=1675818606114') format('woff'),
       url('../font/iiconfont.ttf?t=1675818606114') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color:brown;
}
.icon-shezhitianchong:before {
  content: "\e68d";
}
.icon-yonghutianchong:before {
  content: "\e6a2";
}

二、实例媒体查询

<body>
    <button class="btn small">Btn1</button>
    <button class="btn middle">Btn2</button>
    <button class="btn large">Btn3</button>
    <style type="text/css">
        html { font-size: 0.625rem; }
        .btn {
            background-color: seagreen;
            color: white;
            border: none;
            outline: none;
        }
        .btn:hover { cursor: pointer; opacity: 0.8; transition: 0.3s; }
        /* 小按钮 */
        .btn.small { font-size: 1.2rem; }
        /* 中按钮 */
        .btn.middle { font-size: 1.4rem; }
        /* 大按钮 */
        .btn.large { font-size: 1.6rem; }
        /* 1. 当宽度 < 375px时, 字号 12px */
        @media (max-width: 375px) {
            html { font-size: 12px; }
        }
        /* 375px - 600px  */
        @media (min-width: 375px) and (max-width: 600px) {
            html { font-size: 14px; }
        }
        @media (min-width: 600px) {
            html { font-size: 16px; }
        }
    </style>
</body>