【前端】【html/css】前端学习之路（十三）：CSS高级技巧（二）（精灵图/滑动门/Web字体）

本文链接：https://blog.csdn.net/yongqianbao4519/article/details/81027292

1.精灵图（Sprite）

打开一个网页时，网页中的所有图片已经文字都是从服务器中取来，再显示在屏幕上的，就如：

但是一个网页的图片何止上百，如果如上面流程一般，每一张图片取一次，那这样网页效率就会相当低，大大降低网页的加载速度，为了有效减少服务器接受和发送请求的次数，提高页面的加载速度，就出现了CSS精灵技术（CSS sprite/CSS雪碧）。

（1）精灵技术本质

简单地说，精灵图是一种处理网页背景图像的方式，它将一个页面涉及到的所有图片都放在一个图片里面，然后将其从服务器中取出，这样用户就只需要对服务器请求一次，就可以取得网页所需的所有图片，这个由很多图片所组合起来的大图被称为精灵图（雪碧图）。以下就是京东的精灵图：

（2）精灵技术的应用

得到精灵图后，各个网页元素通常只需要精灵图中不同位置的某个小图，想要精确定位到精灵图中的某个小图，此时就需要用到CSS的background-image、background-repeat和background-position属性进行定位，其中background-position是最关键的属性。

记住要善用Fireworks进行切图。

使用的是Macromeida Fireworks 8.0，大家可以自行百度下载。

示例一：

图片：

首先通过Fireworks获得我们需要图标的大小：

然后通过下面的宽高及XY轴来设置div的大小以及图片移动的位置。

代码如下：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .head {
            width: 26px;
            height: 26px;
            background: url("images/index.png") no-repeat 2px -184px;
            display: inline-block;
        }
        .tail {
            width: 236px;
            height: 128px;
            background: url("images/index.png") no-repeat 0 -219px;
        }
    </style>

<div class="head"></div>王者竞标赛
<div class="tail"></div>

示例二：

目标效果：

图片：

代码：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        span {
            display: inline-block;
            width: 111px;
            height: 120px;
            background-image: url(images/abcd.jpg);
        }
        .h {
            background-position: -213px -139px;
        }
        .a {
            background-position: 0 0;
        }
        .r {
            background-position: -137px -414px;
        }
        .y {
            background-position: -365px -549px;
        }
    </style>

<span class="h"></span>
<span class="a"></span>
<span class="r"></span>
<span class="r"></span>
<span class="y"></span>

2.滑动门

（1）滑动门的背景

现实中的滑动门是这样子的：

而在网页中，经常会出现如下的情况：

此时可以用背景解决，但是每一个标题栏的字数都不一样，这就导致我们的背景非常难设置，没有一个能够跟着字数伸缩的统一背景，此时就需要用到滑动门了。

（2）滑动门的原理

滑动门就是利用CSS精灵（主要是背景位置）和盒子padding来撑开宽度，能够适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
    <a href="#">
      <span>导航栏内容</span>
      </a>
</li>

效果：

原始样式：

被文字撑开之后：

就和现实中的滑动门一般。

注意：

a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的。

示例一

目标效果：

图片：

代码：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            /*让行级元素转换为行级块元素，使其可以设置宽高*/
            display: inline-block;


            /*文字居中设置及颜色*/
            height: 33px;
            line-height: 33px;
            text-decoration: none;
            color: #ffffff;
            /*文字居中设置及颜色*/

            /*设置背景图片，其默认为左对齐，所以无需设置*/
            background: url("images/to.png") no-repeat;
            /*隔开文字距离*/
            padding-left: 15px;
        }
        span {
            /*height和line-height可以从a标签中继承过来，所以这里不设置也可以*/
            display: inline-block;
            /*让背景图片右对齐，就可以得到右边的圆角*/
            background: url("images/to.png") no-repeat right;
            padding-right: 15px;
        }
    </style>

<a href="#">
    <span>
        首页
    </span>
</a>
<a href="#">
    <span>
        微信支付
    </span>
</a>
<a href="#">
    <span>
        表情开放平台
    </span>
</a>

示例二：

目标效果：

图片：

ao:

to:

wx:

代码：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
            float: left;
        }
        body {
            /*微信网页的背景比较特别，它是只给的一边，然后我们只需将其向右平铺即可*/
            background: url(images/wx.jpg) repeat-x;
        }
        .nav a {
            display: inline-block;
            margin: 20px 15px;
            height: 33px;
            text-decoration: none;
            line-height: 33px;
            color: #ffffff;
            background: url("images/to.png") no-repeat;
            padding-left: 15px;
        }
        .nav span {
            display: inline-block;
            background: url("images/to.png") no-repeat right;
            padding-right: 15px;
        }
        /*.nav a:hover 表示当鼠标指向a时，将背景变为黑色*/
        /*.nav a:hover span  表示当鼠标指向a时，同时将span的背景变为黑色*/
        .nav a:hover, .nav a:hover span {
            background-image: url(images/ao.png);
        }
    </style>

<ul class="nav">
    <li>
        <a href="#">
            <span>
                首页
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                微信客户端
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                表情开放平台
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                微信网页版
            </span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>
                微信广告
            </span>
        </a>
    </li>
</ul>

3.Web字体

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。

1、TureType(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

5、SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。

4.字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，这就是字体图标（iconfont).

（1）字体图标和优点

①可以做出跟图片一样可以做的事情,改变透明度、旋转度等。
②本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等。
③本身体积更小，且携带的信息并没有削减。
④几乎支持所有的浏览器。
⑤在移动端设备非常好用。
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..

（2）字体图标使用流程

①设计字体图标

设计字体图标实际上属于UI设计人员的工作，我们一般不需要关心，只需要学会怎么使用图标就可以了，如果图标是大众的，是网上本来就有的，那么我们就可以直接跳到第三步。

②上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。此时可以上传到网站再下载下来，此处以icomoon网站作为例子。a.点击右上角的IcoMoon App

b.选择Import Icons

c.上传文件

Ⅰ.上传svg文件

Ⅱ.上传json文件

可以看到json文件中包含的几个图标。

（3）下载兼容字体包

在第二步上传完毕后再下载下来就可以把svg图片转换为我们可以使用的字体格式。

当然，有时候我们不需要专门的图标，此时就可以上网站下载。

推荐的图标网站：

推荐网站： http://icomoon.io

icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： http://www.iconfont.cn/

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8

https://icons8.com/

提供PNG免费下载，像素大能到500PX

以icomoon为例，获取字体顺序如下：

①点击右上角的IcoMoon App图标

②选择自己想要的图标

③点击右下方的Generate Font

④点击Download

（4）字体引入到html

得到下载到的压缩包之后，我们就需要将其引入我们的html中。

①解压内容如下，首先需要将font文件夹复制到我们的项目文件夹中。

将font文件夹复制到：

②在样式中声明字体，告诉别人我们自定义的字体。

@font-face {
            /*font-family可以随意起名*/
            font-family: 'icomoon';
            src:  url('fonts/icomoon.eot?7kkyc2');
            src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('fonts/icomoon.woff?7kkyc2') format('woff'),
            url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;  
        }

③给盒子使用字体。

span {
            font-family: 'icomoon';
            /*注意这里的font-family要与font-face中的font-family一致*/
        }

④给盒子中添加结构

打开原先字体文件夹中的demo.html

复制你想要的图标字体下方的编码

将其放在span中

span::before {
		 content: "\e9ca";
	}

复制你想要的图标字体下方的小方格

将其放在span中

<span></span>

效果如下：

⑤可以调节该图标的大小和颜色等属性，就如同调节字体一般。

span {
    font-family: 'icomoon';
    /*注意这里的font-family要与font-face中的font-family一致*/
    font-size: 100px;
    color: skyblue;
}

效果：