登录  /  注册
博主信息
博文 27
粉丝 0
评论 0
访问量 24746
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
字体图标与媒体查询
茂林
原创
907人浏览过

字体图标与媒体查询

一、字体图标

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

  • 阿里图标: 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页面
  1. <head>
  2. .............
  3. <link
  4. rel="stylesheet"
  5. href="//at.alicdn.com/t/c/font_3896120_duq8ha656sb.css"
  6. />
  7. </head>
  8. <body>
  9. <!--先使用字体图标引用的//at.alicdn.com/t/c/font_3896120_duq8ha656sb.css页面中定义的 字体图标类 iconfont,
  10. 再要使用字体图标的地方引入图标的代码
  11. -->
  12. <div class="iconfont">
  13. <span class=""></span>
  14. </div>
  15. </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);
  2. /* 自定义字体图标 my-icon */
  3. .my-icon {
  4. color: blue;
  5. font-size: 2em;
  6. }
  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. }
  6. /* 区间: 大于 375px 并且 小于 640px */
  7. @media (min-width: 375px) and (max-width: 640px) {
  8. /* css 规则 */
  9. }
  10. /* min-width: 640px, 大于 640px*/
  11. @media (min-width: 640px) {
  12. /* css 规则 */
  13. }
批改老师:PHPzPHPz

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学