Bootstrap 3.2.0 源码试读 2014/08/14

2019独角兽企业重金招聘Python工程师标准>>>

第三部分 Glyphicons

263至268行

@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');
}

又搞出来一个空行，我发现这个版本空行很多，吐槽一下。

这一部分开始，开始使用WEB字体了，其实这玩意98年的据说就已经出现了。

WEB字体可以分为四种，看上面不同的扩展名就清楚了。

1、.eot，这种是微软件的专有格式，需要版本滴，Embedded OpenType

2、.ttf/.otf，这是我们台式机上使用的格式，TrueType/Open Type

3、.woff，这种才是真是开放的字体，专门为WEB设计，其实就是压缩过的.ttf/.otf。

4、.svg，这种最初是IOS系统使用的，Scalable Vector Graphics。

回头看源码，

@font-face ，这个是告诉浏览器，这部分开始定义的是WEB字体。

font-family后面是字体的名字，'Glyphicons Halflings'。

src: url(*) format(*)，这类似的行就是用来引入字体文件的了，为了区配不同的浏览器，所以搞了这么一大砣。

269至280行

.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;
}

有了WEB体，这段是从用来定义通用的引用的语法了。

首先，定义的是内嵌的盒元素inline-block，这样才能为其设置不同的位置属性。

行高为字体大小的1倍，位置为相对，离顶部1px。

字体的名字是上面定义过的'Glyphicons Halflings'，

font-style，用来设置字体的风格，normal是默认值，字体的标准样式。

如果设置为italic,浏览器会显示一个斜体的字体样式，条件是字体本身有斜体的设计。

如果设置为oblique，浏览器会显示一个倾斜的字体样式。oblique是用来应付字体本身没有斜体样式的情况，就是说字体设计本身没考虑要是斜体应该怎么显示，这时候设置oblique就可以模拟斜体的效果。

当然也可以设置inherit，继承。

font-weight，用来控制字体的粗细。默认值是normal。

与font-style类似，如果字体设计本身集成了粗体的设计，设置成bold就成了。否则只能通过模拟的方式来实现。

bolder（更粗）与lighter（更细）。

100至 900，其中400相当于normal，700相当于bold。

如果想从父元素继承，设置为inherit。

*-font-smoothing是用来为不同浏览器，优化显示的效果的。

281至880行

.glyphicon-asterisk:before {
  content: "\2a";
}
...

这一段就是大体量的ICON定义了。用到了before及content语法，都是前插内容。\开头的是16进制的值。

待续 ... ...

转载于:https://my.oschina.net/moyung2014/blog/301346