转载

字形图标 CSS规则解释

CSS 规则解释

下面的 CSS 规则构成 glyphicon class。

 @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'); }  .glyphicon {   position: relative;   top: 1px;   display: inline-block;   font-family: 'Glyphicons Halflings';   -webkit-font-smoothing: antialiased;   font-style: normal;   font-weight: normal;   line-height: 1;   -moz-osx-font-smoothing: grayscale; }

所以 font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置。

.glyphicon class 声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。

然后，这里的

 .glyphicon:empty {   width: 1em; }

是空的 glyphicon。

这里有 200 个 class，每个 class 针对一个图标。这些 class 的常见格式如下：

 .glyphicon-keyword:before {   content: "hexvalue"; }

比如，使用的 user 图标，它的 class 如下：

 .glyphicon-user:before {   content: "/e008"; }

正文到此结束

所属分类： bootstrap3

本文标签： src value key CSS web
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

字形图标 CSS规则解释

CSS 规则解释

热门推荐

相关文章

bootstrap3

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流