4.1.2　实现方式

4.1.2　实现方式

新版小图标的实现方式与之前的2.x系列版本完全不一样。老版本的实现方式是利用了图片精灵的特性，即所有的小图片都放在一张大图片上；每个小图片通过样式和坐标进行定位显示。

小图标的老版实现源码如下所示：

[class^="icon-"],[class*=" icon-"] {
  display: inline-block;
  width: 14px;      height: 14px;       /* 每个图标的宽度和高度都设置为14px */
  margin-top: 1px;  *margin-right: .3em;
  line-height: 14px;  vertical-align: text-top;
  background-image: url("images/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}
.icon-music {
  background-position: -24px 0;         /* 定位开始坐标 */
}

老版的这种方式有以下两个缺点：

（1）图片大小被固定了，如果放大就会失真。

（2）图片的颜色只有黑色和白色两种，没办法扩展。

新版本的实现方式进行了革命性的更新，使用了CSS3中的@font-face特性。@font-face是CSS3中有关于字体设置的属性，通过它可以将服务器上的字体设置为Web页面字体，并且能完全兼容所有浏览器，使用这个属性则不必担心用户本地不具备这样的字体。因为把字体都上传在服务器上了，可能很多人会担心影响性能问题，但现代的浏览器都会进行样式缓存，有点影响所以影响不是很大，毕竟鱼和熊掌不能兼得。

新版icon就是利用这个@font-face特性，并结合一定的字体，来制作Web页面中的icon图标。原理就是，就是利用特殊的文字在特殊的字体上显示特殊的效果，比如字符A在特殊字体上显示成圆圈的形式，字符B显示为椭圆的形式等。这种形式不仅可以让字体无损失放大，还可以简单地通过color: #ff0的形式设置图标的颜色（因为它本身就是字体，字体当然可以设置颜色）。我们先来看一下@font-face的语法。

@font-face {
   font-family: <YourWebFontName>;
   src: <source> [<format>][,<source> [<format>]]*;
   [font-weight: <weight>];
   [font-style: <style>];
 }

上述语法的参数取值说明如下：

❑YourWebFontName：指的就是你自定义的字体名称，最好是使用自己下载的默认字体，它将被引用到你的Web元素中的font-family，如“font-family:"YourWebFontName";”。

❑source：指的是自定义字体的存放路径，可以是相对路径也可以是绝路径。

❑format：指的是自定义字体的格式，主要用来帮助浏览器识别。其值主要有以下几种类型，truetype、opentype、truetype-aat、embedded-opentype、avg。

❑weight和style：这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

要让浏览器对@font-face进行全部兼容，就需要进行特殊设置，这涉及一个字体format的问题，因为不同浏览器对字体格式的支持是不一样的，不同版本的浏览器可支持不同的字体。下面就各种格式字体进行说明：

❑TureTpe（.ttf）格式：.ttf字体是Windows和Mac中的最常用的字体，是一种RAW格式，因此它不能被网站所优化。支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+。

❑OpenType（.otf）格式：.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能。支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile Safari4.2+。

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

❑Embedded Open Type（.eot）格式：.eot字体是IE专用字体，可以从TrueType创建此格式字体。支持这种字体的浏览器有IE4+。

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

这就意味着在@font-face中我们至少需要.woff、.eot两种格式字体，才能适应所有主流的浏览器，甚至还需要.svg等字体以实现更多种浏览器版本的支持。为了使@font-face得到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face。代码如下：

  @font-face {
     font-family: 'YourWebFontName';
     src: url('YourWebFontName.eot?') format('eot');            /*IE*/
     src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') 
         format('truetype');/*非IE*/
  }

但为了获得更多的浏览器支持，也可以写成如下形式：

@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot');                                / IE9 兼容模式 /
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'),     / IE6～IE8 /
     url('YourWebFontName.woff') format('woff'),                / 现代浏览器 /
     url('YourWebFontName.ttf')  format('truetype'), / Safari、 Android、 iOS /
     url('YourWebFontName.svg#YourWebFontName') format('svg');  / 旧版 iOS /
}

下面来看一下Bootstrap是如何定义这些代码的。

// 源码2367行
@font-face {
 font-family: 'Glyphicons Halflings';
 src: url('../fonts/glyphicons-halflings-regular.eot');
 src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')
              format('svg');
}

上述代码首先定义了字体名称为Glyphicons Halflings，然后根据语法设置了多个浏览器兼容的字体文件。而使用方式，也是利用了CSS的before和content特性进行展示，意思是在应用样式的元素前插入content设定的内容。源码如下：

// 源码2373行
.glyphicon {
 position: relative;    /*设置相对定位*/
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';   /*设置字体名称*/
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
/*示例icon*/
.glyphicon-search:before {                      /* 所有的icon都在before之前设定content */
 content: "\e003"; /* 表示\e003字符在Glyphicons Halflings字体里显示的是搜索图像*/
}

4.1.2 实现方式