Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 引用字体图标实例、媒体查询
Blogger Information
Blog 7
fans 0
comment 0
visits 2302
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
引用字体图标实例、媒体查询
阿辉
Original
347 people have browsed it

引用阿里字体图标实例

1.Unicode方式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>引用字体图标</title>
  8.   </head>
  10.   <!--1. Unicode导入方式，也可以创建一个css引用，link加载即可 -->
  11.   <style>
  12.     /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
  13.     @font-face {
  14.       font-family: "iconfont"; /* Project id 3886249 */
  15.       src: url("//at.alicdn.com/t/c/font_3886249_n99lmnr433.woff2?t=1675846400709")format("woff2"),
  16.         url("//at.alicdn.com/t/c/font_3886249_n99lmnr433.woff?t=1675846400709")format("woff"),
  17.         url("//at.alicdn.com/t/c/font_3886249_n99lmnr433.ttf?t=1675846400709")format("truetype");
  18.     }
  19.     .icon {
  20.         font-family: iconfont;
  21.         font-size: 15px;
  22.         color: blue;
  23.         border: 1px solid ;
  24.         width: 200px;
  25.     }
  27.   </style>
  28.   <body>
  29.     <!-- Unicode示例 -->
  30.     <div class="icon">
  31.         <p>&#xe623;用户</p>
  32.         <p>&#xe689;密码</p>
  33.         <p>&#xe60b;邮箱</p>
  34.     </div>
  35.   </body>
  36. </html>

2.class方式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- 阿里字体图标引入 -->
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3886249_n99lmnr433.css">
  10. </head>
  11. <body>
  12.     <!-- 2.class导入方式 -->
  13.     <div class="iconfont">
  14.         <span class="icon-yonghu-yuan user">用户</span>
  15.         <span class="icon-mima psw">密码</span>
  16.         <span class="icon-gongsiyouxiang email">邮箱</span>
  17.     </div>
  19.     <!-- 自定义修改图标样式示例 -->
  20.     <style>
  22.         .user {
  23.             color: red;
  24.             font-size: 20px;
  25.         }
  27.         .psw {
  28.             color: blue;
  29.             font-size: 25px;
  30.         }
  32.         .email {
  33.             color: violet;
  34.             font-size: 30px;
  35.         }
  36.     </style>
  37. </body>
  38. </html>

媒体查询

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>媒体查询自适应</title>
  8. </head>
  9. <style>
  10.     /* 设置根字号1rem=10xp */
  11.     html {
  12.         font-size: 0.625rem;
  13.     }
  14.     .media {
  15.         /* 设置文本颜色蓝色 */
  16.         color: blue;
  17.         /* 设置边框 */
  18.         border: 1px solid;
  19.     }
  21.     /* 设置鼠标悬浮修改文本颜色红色，鼠标状态修改手指 */
  22.     .media:hover {
  23.         color: red;
  24.         cursor: pointer;
  25.         transition: 0.3s;
  26.     }
  28.     .media.x {
  29.         /* 设置文字大小12px */
  30.         font-size: 1.2rem;
  31.     }
  33.     .media.z {
  34.         /* 设置文字大小16px */
  35.         font-size: 1.6rem;
  36.     }
  38.     .media.d {
  39.         /* 设置文字大小18px */
  40.         font-size: 1.8rem;
  41.     }
  43.     @media (max-width:375px) {
  44.         html {
  45.             font-size: 12px;
  46.         }
  47.     }
  50.     @media (min-width: 375px) and (max-width: 600px) {
  51.         html {
  52.             font-size: 14px;
  53.         }
  54.     }
  55.     @media (min-width: 600px) {
  56.         html {
  57.             font-size: 16px;
  58.         }
  59.     }
  61. </style>
  62. <body>
  63.     <p class="media x">小号</p>
  64.     <p class="media z">中号</p>
  65.     <p class="media d">大号</p>
  67. </body>
  68. </html>

总结

1.学习到字体图标导入方法，设置图标
2.网页的自适应方式，媒体查询

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post