HTML5和css样式精灵图和字体图标的使用

一、精灵图的使用

1.精灵图的介绍

1.1什么是精灵图

1.2精灵图基本概念

1.3精灵图的优势

2.适用场景

3.精灵图的使用

3.1使用步骤

3.2使用注意事项

3.3示例

二、字体图标的使用

1.字体图标下载网站：

2.字体图标的产生

3.字体图标的使用

4.字体图标的优点

5.示例

3.总结

一、精灵图的使用

1.精灵图的介绍

1.1什么是精灵图

精灵图（Sprite），也被称为CSS Sprites或雪碧图，是一种优化网页性能的技术。该技术通过将多个小图标、图像或其他图形元素合并成一个单一的图像文件，并利用CSS来控制每个图形元素的显示位置和尺寸，以减少HTTP请求的数量，从而提高页面加载速度。

1.2精灵图基本概念

图像合并：将多个小图标或图形元素合并成一个大图像文件，这个大图像文件通常是一个矩形，其中包含所有的小图标，它们排列在一行或一列上，不同的小图标之间通过适当的间隔或边距分隔。
CSS控制：通过CSS的背景图像（background-image）属性，将这个大图像文件设置为一个元素的背景。使用CSS的背景位置（background-position）属性来指定在元素内显示哪个小图标，以及它们在大图像文件中的位置。

1.3精灵图的优势

减少HTTP请求：合并多个图像元素为一个文件，显著减少了每个图像的HTTP请求，从而缩短了页面加载时间。
提高性能：一次加载一个大图像文件比多次加载小图像文件更有效率，尤其在移动设备上或具有较慢网络连接的情况下。
节省带宽：减少了不必要的网络流量，有助于降低带宽成本。
简化CSS：通过使用单一的背景图像和背景位置属性，可以减少CSS代码的复杂性。
方便管理：所有图标都包含在一个文件中，使得管理和维护变得更加容易。

2.适用场景

精灵图特别适合用于网页中的小图标素材，如按钮图标、导航图标等。然而，对于大背景或大布局背景，精灵图可能不是最佳选择。

3.精灵图的使用

3.1使用步骤

准备图像：将需要合并的小图标或图形元素准备好，并确保它们具有清晰的边界和适当的间隔。
合并图像：使用图像编辑软件（如Photoshop、GIMP等）将小图标合并成一个大图像文件。在合并时，要注意图标的排列顺序和间距，以避免在显示时出现重叠或错位。
编写CSS：为包含精灵图的元素编写CSS样式。首先，使用background-image属性将精灵图设置为元素的背景图像。然后，使用background-position属性来指定要显示的图标在大图像文件中的位置。
HTML布局：在HTML中创建适当的元素（如div、span等），并为它们应用上面编写的CSS样式。这样，当页面加载时，就会根据CSS样式的设置显示对应的图标。

3.2使用注意事项

1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现--background-position.
3.一般情况下精灵图都是负值。( 千万注意网页中的坐标: x轴右边走是正值,左边走题值，y轴同理。)

3.3示例

    <style>
        .box1 {
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background: url(../images1/sprites.png) no-repeat;
            /* 根据自己的图片调整 */
            background-position: -182px 0;
        }

        .box2 {
            width: 27px;
            height: 25px;
            margin: 200px;
            background-color: skyblue;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

二、字体图标的使用

1.字体图标下载网站：

https://icomoon.io/

https://www.iconfont.cn/?spm=a313x.illustrations_detail.i3.2.5afb3a810tLyH6

2.字体图标的产生

字体图标使用场景:主要用于显示网页中通用、常用的一-些小图标。

精灵图是有诸多优点的,但是缺点很明显。

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真。

3. 一旦图片制作完毕想要更换非常复杂。

此时,有一种技术的出现很好的解决了以上问题, 就是字体图标iconfont.

3.字体图标的使用

字体图标的使用通常涉及以下几个步骤：

下载字体文件和CSS文件：从在线工具或图标库下载生成好的字体文件和CSS文件。
将文件添加到项目中：将下载的字体文件和CSS文件添加到项目的合适位置。通常，字体文件会放在项目的fonts文件夹中，CSS文件则放在css文件夹中。
引入CSS文件：在HTML文件的<head>部分引入CSS文件。这可以通过<link>标签实现，例如：<link rel="stylesheet" href="css/iconfont.css">。
使用类名引用图标：在HTML文件中，通过添加带有特定类名的元素（如<i>、<span>等）来引用字体图标。这些类名通常在CSS文件中定义，并与字体文件中的字符（glyph）对应。例如，要显示一个用户图标，可以在HTML中添加如下代码：<i class="iconfont icon-user"></i>。其中，iconfont是一个通用的类名，用于指定使用哪个字体文件；icon-user则是与用户图标对应的类名。

4.字体图标的优点

轻量级 :一个图标字体要比一系列的图像要小。一 -旦字体加载了 ,图标就会马上渲染出来,减少了服务器请求
灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器,请放心使用

注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。

5.示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*字体声明 */
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?k8a6wb');
            src: url('fonts/icomoon.eot?k8a6wb#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?k8a6wb') format('truetype'),
                url('fonts/icomoon.woff?k8a6wb') format('woff'),
                url('fonts/icomoon.svg?k8a6wb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        span {
            font-family: 'icomoon';
            font-size: 50px;
            color: rgb(249, 204, 126);
        }

        .box1 {
            width: 0;
            height: 0;
            border-top: solid 10px pink;
            border-right: solid 10px rgb(235, 8, 45);
            border-left: solid 10px rgb(46, 15, 246);
            border-bottom: solid 10px rgb(240, 5, 185);
        }

        .box2 {
            margin-top: 100px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #f59292;

        }

        .jd {
            position: relative;
            width: 120px;
            height: 249px;
            background-color: pink;
        }

        .jd span {
            position: absolute;
            right: 15px;
            top: -10px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 5px solid transparent;
            border-bottom-color: #f8a5a5;

        }

        .lianxi {
            position: relative;
            width: 150px;
            height: 249px;
            background-color: rgb(155, 194, 241);
        }

        .lianxi span {
            position: absolute;
            right: -20px;
            top: 70px;
            width: 0;
            height: 0;
            /* 为了照顾兼容性 */
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-left-color: #95f373;

        }
    </style>
</head>

<body>
    <span></span>
    <span></span>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="jd">
        <span></span>
    </div>
    <div class="lianxi">
        <span></span>
    </div>
</body>

</html>

3.总结

1.如果遇到一些结构和样式比较简单的小图标,就用字体图标。

2.如果遇到些结构和样式复杂-点的小图片 ,就用精灵图。

HTML5和css样式精灵图和字体图标的使用

一、 精灵图的使用

1.精灵图的介绍

1.1什么是精灵图

1.2精灵图基本概念

1.3精灵图的优势

2.适用场景

3.精灵图的使用

3.1使用步骤

3.2使用注意事项

3.3示例

二、字体图标的使用

1.字体图标下载网站：

2.字体图标的产生

3.字体图标的使用

4.字体图标的优点

5.示例

3.总结

一、精灵图的使用