search

博客列表 >字体图标的引用及媒体查询

字体图标的引用及媒体查询

白鸽
白鸽原创
2022年10月26日 14:02:21802浏览

字体图标的引用及媒体查询

媒体查询由小屏幕到大屏幕查询效果如下。
1
2

" class="reference-link">3

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.     <style>
  9.         html{
  10.             font-size: 64px;
  11.         }
  12.         /* 体验使用下载图标的方式，先引用下载图标的字体文件 */
  13.         @font-face {
  14.   font-family: "iconfont";
  15.   src: url('iconfont.woff2') format('woff2'),
  16.        url('iconfont.woff')  format('woff'),
  17.        url('iconfont.ttf')   format('truetype');
  18. }
  20. .iconfont {
  21.   font-family: "iconfont" !important;
  22.   font-size: 1rem;
  23.   font-style: normal;
  24.   -webkit-font-smoothing: antialiased;
  25.   -moz-osx-font-smoothing: grayscale;
  26. }
  28. .icon-tuichudenglu:before {
  29.   content: "\e6cf";
  30. }
  32. .icon-shezhi:before {
  33.   content: "\e6d8";
  34. }
  36. .icon-shouye:before {
  37.   content: "\e6fa";
  38. }
  40. .icon-wode:before {
  41.   content: "\e6fb";
  42. }
  44. /* 字体文件设置引入完毕 */
  46. @media (max-width: 374px) {
  47.         html {
  48.           font-size: 16px;
  49.         }
  50.       }
  51. @media (min-width: 375px) and (max-width: 768px) {
  52.         html {
  53.           font-size: 32px;
  54.         }
  55.       }
  56. @media (min-width: 768px) {
  57.         html {
  58.           font-size: 64px;
  59.         }
  60.       }
  64.     </style>
  65. </head>
  66. <body>
  67.     <div>
  68.         <p><span class="iconfont icon-shouye"></span>&nbsp;&nbsp;&nbsp;&nbsp;
  69.             <span class="iconfont icon-tuichudenglu"></span>&nbsp;&nbsp;&nbsp;&nbsp;
  70.             <span class="iconfont icon-shezhi"></span>&nbsp;&nbsp;&nbsp;&nbsp;
  71.             <span class="iconfont icon-wode"></span></p>
  72.     </div>
  73. </body>
  74. </html>
上一条：1025作业下一条：1019 +实现 小后台
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多