Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 字体图标的引入与显示，实例媒体查询
Blogger Information
Blog 77
fans 0
comment 0
visits 54997
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
字体图标的引入与显示，实例媒体查询
Jet的博客
Original
528 people have browsed it

一、字体图标的引入

1.1 unicode和fontclass引入

HTML文件

  1.     <link rel="stylesheet" href="css/css.css">
  2.     <link rel="stylesheet" href="css/css1.css">
  3.     <title>引入字体iconfont</title>
  4.     </head>
  5.     <!-- 1、unicode引入：css文件引入Unicode代码 -->
  6.     <div class="my-font">
  7.         <span>&#xe6a2;</span>
  8.         <span>&#xe68d;</span>
  9.     </div>
  11.     <!-- 2、fontcss引入：css文件引入css链接 -->
  12.     <div class="iconfont">
  13.         <span class="icon-yonghutianchong active"></span>
  14.     </div>
  15.     <div class="iconfont">
  16.         <span class="icon-shezhitianchong active"></span>
  17.     </div>

css.css文件

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

css1.css文件

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

1.2 下载本地引入

  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.     <link rel="stylesheet" href="css/iconfont.css">
  8.     <title>下载本地引入字体iconfont</title>
  9. </head>
  10. <body>
  11.     <!--3、下载本地引入-->
  12.     <div class="iconfont">
  13.         <span>&#xe6a2;</span>
  14.     </div>
  16. </body>
  17. </html>
  1. @font-face {
  2.   font-family: "iconfont"; /* Project id 3884767 */
  3.   src: url('../font/iconfont.woff2?t=1675818606114') format('woff2'),
  4.        url('../font/iiconfont.woff?t=1675818606114') format('woff'),
  5.        url('../font/iiconfont.ttf?t=1675818606114') format('truetype');
  6. }
  8. .iconfont {
  9.   font-family: "iconfont" !important;
  10.   font-size: 16px;
  11.   font-style: normal;
  12.   -webkit-font-smoothing: antialiased;
  13.   -moz-osx-font-smoothing: grayscale;
  14.   color:brown;
  15. }
  17. .icon-shezhitianchong:before {
  18.   content: "\e68d";
  19. }
  21. .icon-yonghutianchong:before {
  22.   content: "\e6a2";
  23. }

二、实例媒体查询

  1. <body>
  2.     <button class="btn small">Btn1</button>
  3.     <button class="btn middle">Btn2</button>
  4.     <button class="btn large">Btn3</button>
  6.     <style type="text/css">
  7.         html { font-size: 0.625rem; }
  8.         .btn {
  9.             background-color: seagreen;
  10.             color: white;
  11.             border: none;
  12.             outline: none;
  13.         }
  14.         .btn:hover { cursor: pointer; opacity: 0.8; transition: 0.3s; }
  15.         /* 小按钮 */
  16.         .btn.small { font-size: 1.2rem; }
  17.         /* 中按钮 */
  18.         .btn.middle { font-size: 1.4rem; }
  19.         /* 大按钮 */
  20.         .btn.large { font-size: 1.6rem; }
  22.         /* 1. 当宽度 < 375px时, 字号 12px */
  23.         @media (max-width: 375px) {
  24.             html { font-size: 12px; }
  25.         }
  27.         /* 375px - 600px  */
  28.         @media (min-width: 375px) and (max-width: 600px) {
  29.             html { font-size: 14px; }
  30.         }
  32.         @media (min-width: 600px) {
  33.             html { font-size: 16px; }
  34.         }
  35.     </style>
  36. </body>

总结：

1、字体图标等引入可以去 https://www.iconfont.cn/，进行，方便；

2、媒体查询注意是通过：@media，获取屏幕max-width或者min-width属性进行css调整。

操作符：and not only

书写顺序：手机端从小到大，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