成都网站建设设计

将想法与焦点和您一起共享

CSS怎么实现精灵图与字体图标

这篇文章将为大家详细讲解有关CSS怎么实现精灵图与字体图标,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

秀山土家族苗族网站建设公司成都创新互联,秀山土家族苗族网站设计制作,有大型网站制作公司丰富经验。已为秀山土家族苗族成百上千提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的秀山土家族苗族做网站的公司定做!

精灵图:

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

为了减少资源的访问次数,将多个常用的图片集合到一张图片中(网页的缓存机制是会略去本地已经有的资源,如果前一次获取到了这个资源,那么后面不会再访问了,直到缓存的资源失效了。

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

示例:

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

CSS怎么实现精灵图与字体图标




    
    Document
    


    
    
    
    
    
    

结果:

CSS怎么实现精灵图与字体图标

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

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

比如京东LOGO:

CSS怎么实现精灵图与字体图标CSS怎么实现精灵图与字体图标

京东的一些小图标:

CSS怎么实现精灵图与字体图标CSS怎么实现精灵图与字体图标

字体图标:

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

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

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

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

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

CSS怎么实现精灵图与字体图标

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

CSS怎么实现精灵图与字体图标

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

CSS怎么实现精灵图与字体图标

然后使用:




    
    Document
    
    /* 声明字体  这下面一堆文字在下载的文件夹中的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';/* 要与上面一致 */
        }
    


    
           
       

关于“CSS怎么实现精灵图与字体图标”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


当前标题:CSS怎么实现精灵图与字体图标
浏览路径:http://chengdu.cdxwcx.cn/article/psigds.html

其他资讯