CSS之精灵图（雪碧图）与字体图标

番茄西红柿发布于2019-04-23 13:46 / 1559人阅读

摘要：本文内容精灵图字体图标首发日期精灵图在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。能提供一种使用字体图标的方式能提供第二种使用字体图标的方式。

本文内容：

精灵图
字体图标

首发日期：2018-05-01

精灵图：

在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。

为了减少资源的访问次数，将多个常用的图片集合到一张图片中（网页的缓存机制是会略去本地已经有的资源，如果前一次获取到了这个资源，那么后面不会再访问了，直到缓存的资源失效了。【意思有点类似去游乐园，有些票能玩所有游戏，而有些票只能玩一个游戏，如果你拿着能玩所有游戏的票，那你就不用麻烦去一次次买票了】）。

将多个常用的图片集合到一张图片中之后，把这个图设置成背景图片，然后利用background-position来显示图片的不同部分。

示例：

下面是一张26字母表，我们利用这张图来拼出一个GOOGLE

图片资源:https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=abcdefg%E5%AD%97%E6%AF%8D%E8%A1%A8&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=3405886261,1538057521&os=178737096,359585931&simid=3351831992,40571452&pn=1&rn=1&di=168865797980&ln=132&fr=&fmq=1525108485498_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F12%2F24%2F2216482877.jpg%40100q.jpg&rpstart=0&rpnum=0&adpicid=0

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style>
        div{
            display:inline-block;
        }
        div:first-child{
            width:79px;
            height: 79px;
            background-image:url(abcd.jpg);
            background-position:-396px 0;
        }
        div:nth-child(2){
            width:82px;
            height: 82px;
            background-image:url(abcd.jpg);
            background-position:-326px -98px;
        }
        div:nth-child(3){
            width:82px;
            height: 82px;
            background-image:url(abcd.jpg);
            background-position:-326px -98px;
        }
        div:nth-child(4){
            width:79px;
            height: 79px;
            background-image:url(abcd.jpg);
            background-position:-396px 0;
        }
        div:nth-child(5){
            width:48px;
            height: 77px;
            background-image:url(abcd.jpg);
            background-position:-81px -101px;
        }
        div:nth-child(6){
            width:48px;
            height: 77px;
            background-image:url(abcd.jpg);
            background-position:-286px 0;
        }

    style>
head>
<body>
    <div>div>
    <div>div>
    <div>div>
    <div>div>
    <div>div>
    <div>div>
body>
html>

结果:

如上例所示,我们可以把多张图片放到一张大图中,然后利用background-position就可以截取出我们想要看到的内容.

在现实中很多的背景图片都使用了这种技术.

比如京东LOGO:

京东的一些小图标：

字体图标：

众所周知，单位字体的文件大小小于图片的大小，考虑精灵图处理的是一张张图片，有人就有了一个奇思妙想--把图片转换成字体（实际上字体本来就是那么设计下来的。）

转换成字体后，可以使用特殊的代码来显示出指定的图片。

字体图标比精灵图有一个非常明显的好处，因为他是字体，所以它能够改变字体颜色，能改变字体大小（并且不会失真）。

例子：【下面仅演示使用，不演示如何制作字体图标】

我利用icomoon制作了一套字体图标，【icomoon有现成的图标选择】，并下载下来。下面是文件名。

style.css能提供一种使用字体图标的方式

demo.html能提供第二种使用字体图标的方式。

然后使用：

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Documenttitle>
    <style >
    /* 声明字体  这下面一堆文字在下载的文件夹中的css文件中*/
        @font-face {
      font-family: icomoon;
      src:  url(fonts/icomoon.eot?ni3k5c);
      src:  url(fonts/icomoon.eot?ni3k5c#iefix) format(embedded-opentype),
        url(fonts/icomoon.ttf?ni3k5c) format(truetype),
        url(fonts/icomoon.woff?ni3k5c) format(woff),
        url(fonts/icomoon.svg?ni3k5c#icomoon) format(svg);
      font-weight: normal;
      font-style: normal;
        }
        /* 使用 */
        [class^="icon-"], [class*=" icon-"] {
          /* use !important to prevent issues with browser extensions that change fonts */
          font-family: icomoon !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;

          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon-home:before {
          content: "e900";
        }
        .icon-image:before {
          content: "e90d";
        }
        .icon-music:before {
          content: "e911";
        }
        div{
            font-family:icomoon;/* 要与上面一致 */
        }
    style>
head>
<body>
    <div class=".icon-imagee">div> 
    

    <div>div> 

     

body>
html>

GPU云服务器云服务器雪碧图 html使用雪碧图 html 精灵图 html精灵图引入

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2311.html

浅谈 CSS Sprites 雪碧图应用

摘要：编写配置文件，以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐，是因为非常的灵活，看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式...

MkkHou 2019-08-30 13:12 评论0 收藏0
CSS4:icon全解

摘要：全解法如何在文件里扣出图层里的图标右键选中这个图层右击这个图层把这个图层放到新文件点击图片的按钮自动切图到最小再调整一下画布大小将图片设置为长宽一样导出即可在页面里图片会默认保持比例所以只要设置宽高的其中一种就可以了抠图的前端现在基本没有了 CSS4:icon全解 1.img法 1.1如何在psd文件里扣出图层里的图标右键选中这个图层showImg(https://segmentf...

LinkedME2016 2019-08-30 15:53 评论0 收藏0
浮动的补充丶文本和字体属性丶background丶定位

摘要：英语为了防止用户电脑里面，没有微软雅黑这个字体。因为绝对定位脱离标准流，影响页面的布局。一丶浮动的补充　　浮动的特性: 　　　　1.浮动的元素脱标　　　　2.浮动的元素互相贴靠　　　　3.浮动的元素有字围效果　　　　4.浮动的元素有收缩的效果　　　　前提是标准文档流,margin的垂直方向会出现塌陷问题　　　　如果盒子居中:margin: 0auto;如果盒子浮动了,margin...

番茄西红柿 2019-04-23 13:22 评论0 收藏0
使用compass自动合并css雪碧图(css sprite)

摘要：使用雪碧图，能够减少页面的请求数降低图片占用的字节，以此来达到提升页面访问速度的目的。也正是因为这一点，导致很多开发者懒于使用雪碧图。本文就介绍下怎样使用来自动合并雪碧图。生成的每个雪碧图默认的规则是目录名图片名。 css雪碧图又叫css精灵或css sprite，是一种背景图片的拼合技术。使用css雪碧图，能够减少页面的请求数、降低图片占用的字节，以此来达到提升页面访问速度的目的。但...

刘永祥 2019-08-28 18:06 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0