博客列表 >字体图标的引入与显示,实例媒体查询

字体图标的引入与显示,实例媒体查询

Jet的博客
Jet的博客原创
2023年02月14日 15:42:04526浏览

一、字体图标的引入

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>
  10. <!-- 2、fontcss引入:css文件引入css链接 -->
  11. <div class="iconfont">
  12. <span class="icon-yonghutianchong active"></span>
  13. </div>
  14. <div class="iconfont">
  15. <span class="icon-shezhitianchong active"></span>
  16. </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. }
  8. .my-font {
  9. font-family: user_iconfont; font-size: 3em; color: blue;
  10. }

css1.css文件

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




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>
  15. </body>
  16. </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. }
  7. .iconfont {
  8. font-family: "iconfont" !important;
  9. font-size: 16px;
  10. font-style: normal;
  11. -webkit-font-smoothing: antialiased;
  12. -moz-osx-font-smoothing: grayscale;
  13. color:brown;
  14. }
  15. .icon-shezhitianchong:before {
  16. content: "\e68d";
  17. }
  18. .icon-yonghutianchong:before {
  19. content: "\e6a2";
  20. }



二、实例媒体查询

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




总结:

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

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

操作符:and not only

书写顺序:手机端从小到大,PC端从大到小

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议