Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css字体图标引入与媒体查询
Blogger Information
Blog 37
fans 0
comment 1
visits 28429
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
css字体图标引入与媒体查询
kong
Original
622 people have browsed it

字体图标

1. 阿里图标

链接 https://www.iconfont.cn/

进入阿里图标，新建一个项目，选择好图标加入项目。
1.2 .iconfont: 自定义字体，字体图标
1.3 .font-family: iconfont
1.4 .使用 @font-face

2. 类名图标 直观通用(个人推荐使用)

  1. 类名图标 直观通用推荐使用 

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <!-- 引入成功以后会有一个 .iconfont使用 -->
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3013559_jege94jsqh.css">
  10. </head>
  11. <style>
  12.     *{
  13.         padding: 0;
  14.         margin: 0;
  15.     }
  16.     .icon i{
  17.         font-size: 5rem;
  18.         color: red;
  19.         font-weight: 700;
  20.     }
  21. </style>
  22. <body>
  23.     <div class="icon">
  24.         <!--必须加入iconfont，后面在写入图标类名-->
  25.         <i class="iconfont icon-duanzhen6"></i>
  26.     </div>
  27. </body>
  28. </html>

3. Unicode: 兼容性好 (如果乱码就不行了)

  1. Unicode: 兼容性好

  1.     <!DOCTYPE html>
  2. <html lang="en">
  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.     <!-- 引入成功以后会有一个 .iconfont使用 -->
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3013559_jege94jsqh.css">
  10. </head>
  11. <style>
  13.     @font-face {
  14.     /* 定义字体名称 */
  15.     font-family: 'iconfont';
  16.     /* 字体文件的位置 */
  17.     src: url('//at.alicdn.com/t/c/font_3013559_jege94jsqh.woff2?t=1675127744439') format('woff2'),
  18.         url('//at.alicdn.com/t/c/font_3013559_jege94jsqh.woff?t=1675127744439') format('woff'),
  19.         url('//at.alicdn.com/t/c/font_3013559_jege94jsqh.ttf?t=1675127744439') format('truetype');
  20.     }
  22.     *{
  23.         padding: 0;
  24.         margin: 0;
  25.     }
  27.     span{
  28.         font-family: 'iconfont';
  29.         color: red;
  30.         font-weight: 700;
  31.         font-size: 5em;
  32.     }
  33. </style>
  35. <body>
  36.     <span>&#xe60e;</span>
  37. </body>
  38. </html>

媒体查询

根据媒体宽度确定展示方式与内容
指令： @media,默认screen(屏幕)
属性：max-width小于,min-width大于
操作符：and,not,only
书写顺序: 1. 移动端优先: 从小到大 2. PC优先：从大到小

  1.     <!DOCTYPE html>
  2. <html lang="en">
  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. <body>
  10.     <div class="container">
  11.         <h1>媒体查询</h1>
  12.         <h2>hello</h2>
  13.     </div>
  16.     <style>
  17.         html{
  18.             /* 初始值 */
  19.             font-size: .625rem;
  20.         }
  22.         /* 移动优先 */
  23.         @media(max-width: 375px){
  24.             html{
  25.                 /* //使用具体的PX值 */
  26.                 font-size: 12px; 
  27.             }
  29.             h1{
  30.                 font-size: 1rem;
  31.                 color: darkblue;
  32.             }
  34.             h2{
  35.                 font-size: 0.8rem;
  36.                 color: aquamarine;
  37.             }
  39.         }
  41.         /* 区间大于375px并且小于640px */
  42.         @media(min-width: 375px)and(max-width:640px){
  43.             /* 写入css样式 */
  44.             html{
  45.                 /* //使用具体的PX值 */
  46.                 font-size: 14px; 
  47.             }
  48.         }
  50.         /* min-width: 640px,大于640px */
  51.         @media(min-width: 640px){
  52.             /* 写入css样式 */
  53.             html{
  54.                 /* //使用具体的PX值 */
  55.                 font-size: 16px; 
  56.             }
  57.         }
  59.     </style>
  60. </body>
  61. </html>

总结：

  1. 字体图标引入选择类名图标方式引入
  2. 媒体查询根据项目需要进行选择是移动优先还是PC优先！哪个优先哪个尺寸写在上面
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