精灵图与字体图标

_Vrtual .

已于 2022-04-02 20:29:00 修改

阅读量136

点赞数 1

文章标签： css

于 2022-04-02 20:24:38 首次发布

本文链接：https://blog.csdn.net/weixin_61466362/article/details/123928045

版权

精灵图：为了有效的减少服务器接受和发送请求的次数，提高网页加载效率。

核心原理：将网页中的小背景图整合到一张大图中，使服务器只请求一次即可。

1、精灵图 sprites 使用

精灵图主要针对背景图片使用
称为sprites
移动图片 background-position 对应x轴与y轴

<style>
        span {
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .p {
            width: 100px;
            height: 112px;
            /* background-color: pink; */
           background-position:  -493px -276px;
        }
        .i {
            width: 60px;
            height: 108px;
            /* background-color: pink; */
            background-position: -327px -142px;
        }
        .n {
            width: 108px;
            height: 109px;
            /* background-color: pink; */
            background-position: -215px -141px;
        }
        .k {
            width: 105px;
            height: 114px;
            /* background-color: pink; */
           background-position: -495px -142px;
        }
    </style>

效果

2、字体图标产生及优点

iconfont 展示图标本质为字体

优点：

轻量性比一系列图像小
灵活性本质为文字可以修改颜色、大小等
兼容性所有浏览器都可以使用

注：字体图标不可以代替精灵图

应用：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>字体图标的使用</title>
  <style>
    /* 字体声明 */
     @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?p4ssmb');
  src:  url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
    url('fonts/icomoon.woff?p4ssmb') format('woff'),
    url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

  span {
    font-family: 'icomoon';
    font-size: 100px;
    color:pink;
  }
  </style>
</head>

<body>
    <span></span>
    <span></span>
</body>

</html>

注：字体图标的下载

1、字体图标的下载 iconcoom.io

2、字体图标的引入

3、字体图标的使用

字体图标追加、加载原理：把压缩包 selection.jsm重新上传，选中需要的新图标，重新下载压缩包，替换旧压缩包。

总结

结构样式简单的小图标用字体图标

结构样式复杂的图标用精灵图

_Vrtual .

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
精灵图与字体图标

精灵图：为了有效的减少服务器接受和发送请求的次数，提高网页加载效率。核心原理：将网页中的小背景图整合到一张大图中，使服务器只请求一次即可。1、精灵图 sprites 使用精灵图主要针对背景图片使用称为sprites 移动图片 background-position 对应x轴与y轴<style> span { display: inline-block; background: url(images/abcd.j
复制链接

扫一扫