简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 字体图标与媒体查询
Blogger Information
Blog 27
fans 0
comment 0
visits 18949
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
673 people have browsed it

字体图标与媒体查询

一、字体图标

字体图标的引入与显示/ 实例演示媒体查询(移动优先)

  • 阿里图标: https://www.iconfont.cn/
  • Unicode: 兼容性好
  • class: 直观,通用
    演示图标引入与显示
    1 从阿里图标找中意的图标，使用Unicode方式将字体代码复制到一个css文件中
    1. /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
    2. @font-face {
    3. font-family: "iconfont"; /* Project id 3896120 */
    4. src: url("//at.alicdn.com/t/c/font_3896120_duq8ha656sb.woff2?t=1676386325316")
    5.     format("woff2"),
    6.   url("//at.alicdn.com/t/c/font_3896120_duq8ha656sb.woff?t=1676386325316")
    7.     format("woff"),
    8.   url("//at.alicdn.com/t/c/font_3896120_duq8ha656sb.ttf?t=1676386325316")
    9.     format("truetype");
    10. }
    11. .my-font {
    12. font-family: iconfont;
    13. font-size: 3em;
    14. color: red;
    15. }

iconfont

2.引入要使用字体图标的页面
2.1 使用link元素将字体图标的css文件导入页面。

  1. <head>
  2. ....
  3.  <link rel="stylesheet" href="css/font-icon-demo.css" />
  4. </head>
  5. <body>
  6.  <!--在引用字体图标的位置填入字体图标的16进制的代码，比如下面引用了“退出”的字体图标-->
  7.   <!-- 1. Unicode 引入-->
  8.     <!-- 行内样式引用字体图标 -->
  9.     <div style="font-family: iconfont; font-size: 32px">
  10.       <span>退出&#xe892;</span>
  11.     </div>
  12.     <!-- 使用class类引用自定义字体图标 -->
  13.     <div class="my-font">
  14.       <span>登录&#xe70a;</span>
  15.     </div>
  16. </body>

效果：

2.2 使用class引入字体图标

将字体图标的引入的链接使用@import url() 导入使用字体图标的页面
@import url(//at.alicdn.com/t/c/font_3896120_duq8ha656sb.css)
引入的方式有两种：

  1. 1. 直接使用link标签引入使用字体图标的html页面
  2. <head>
  3.     .............
  4.      <link
  5.       rel="stylesheet"
  6.       href="//at.alicdn.com/t/c/font_3896120_duq8ha656sb.css"
  7.     />
  8. </head>
  9. <body>
  10.     <!--先使用字体图标引用的//at.alicdn.com/t/c/font_3896120_duq8ha656sb.css页面中定义的 字体图标类  iconfont, 
  11. 再要使用字体图标的地方引入图标的代码
  12. -->
  13.     <div class="iconfont">
  14.         <span class=""></span>
  15.     </div>
  16. </body>

2.使用以下代码，引入一个css文件中，再将css文件用link引入html页面中使用。

  1. @import url(//at.alicdn.com/t/c/font_3896120_duq8ha656sb.css);引入一个css文件中。

推荐使用这个方法来使用字体图标，方便自定义字体图标。

  1. @import url(//at.alicdn.com/t/c/font_3896120_duq8ha656sb.css);
  3. /* 自定义字体图标 my-icon */
  5. .my-icon {
  6.   color: blue;
  7.   font-size: 2em;
  8. }
  1. <div class="iconfont my-icon"><span class="icon-shezhi"></span></div>

效果：

二、媒体查询

  1. 媒体: 信息载体,如屏幕, 手机, 打印机…
  2. 查询: 根据媒体宽度确定展示方式与内容
  3. 指令: @media,默认screen即屏幕
  4. 属性: max-width,min-width
  5. 操作符: and,not,only
  6. 书写顺序约定
    1. 移动端优先: 从小到大
    2. PC 端优先: 从大到小
  1. /* 以移动优先为例 */
  2. /* max-width:375px, 小于375px */
  3. @media (max-width: 375px) {
  4.   /* css 规则 */
  5. }
  7. /* 区间: 大于 375px 并且 小于 640px */
  8. @media (min-width: 375px) and (max-width: 640px) {
  9.   /* css 规则 */
  10. }
  12. /* min-width: 640px, 大于 640px*/
  13. @media (min-width: 640px) {
  14.   /* css 规则 */
  15. }
Correcting teacher：PHPzPHPz

Correction status：Uncorrected

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！