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
Bootstrap 3.2.0 源码试读 2014/08/14相关推荐
- Redis源码试读(一)源码准备
这里开始查看Redis的源码,之前是在看Unix的环境编程,虽然这本书写的很好,但是只看这个感觉有点隔靴搔痒.你可以知道沙子.水泥.钢筋的特性,但是要想建一栋大楼仍然是另一回事.Unix环境编程要看, ...
- 百度DisConf分布式配置框架源码试读(一)HttpClient 长连接
Spring Cloud Config配置中心 我在学习Spring Cloud Config配置中心时理解了它体系下的配置中心的强大.实现了配置的远程管理.微服务的配置更新.Spring Cloud ...
- 12 编译2022年最新的BusyBox rootfs 1.35.0源码,并用QEMU模拟器运行
编译2022年最新的BusyBox rootfs 1.35.0源码,并用QEMU模拟器运行 作者 将狼才鲸 创建日期 2022-11-26 Gitee源码和工程地址:才鲸嵌入式 / 嵌入式QEMU教程 ...
- Spark Mlib TFIDF源码详读 笔记
2019独角兽企业重金招聘Python工程师标准>>> 在提取文本特征时,经常用到TF-IDF算法.Spark Mlib实现了该算法.下面是Spark Mlib中,TF_IDF算法调 ...
- ubuntu下编译安卓7.0源码
ubuntu下使用国内镜像下载安卓7.0源码 本文使用的环境如下: 1.Ubuntu系统:ubuntu-18.04.5-desktop-amd64 2.repo:谷歌开发的方便拉安卓源码的工具 3.p ...
- RocketMQ4.0源码分析之-路由管理
RocketMQ4.0源码分析之-路由管理 一 前言 路由管理功能是RocketMQ的核心功能之一,涵盖了订阅管理,连接管理,负载均衡管理等一系列功能,代码布在NameServer,Broker,Pr ...
- SRS4.0源码分析-序言
<SRS4.0源码分析>专栏,会从 configure(配置),makefile(编译规则),main (入口函数), 带你一步一步了解 SRS 的主干代码逻辑. 这里分享一个本人阅读开源 ...
- Android 8.0学习(32)---Android 8.0源码目录结构详解
Android 8.0源码目录结构详解 android的移植按如下流程: (1)android linux 内核的普通驱动移植,让内核可以在目标平台上运行起来. (2)正确挂载文件系统 ...
- Kafka 3.0 源码笔记(3)-Kafka 消费者的核心流程源码分析
文章目录 前言 1. 消费者负载均衡的实现 2. 源码分析 2.1 KafkaConsumer 的初始化 2.2 KafkaConsumer 的消息拉取 2.2.1 消息拉取的准备及入口 2.2.2 ...
- Linux驱动开发 / fbtft源码速读
哈喽,老吴又来分享学习心得啦~ 一.目标与体系 目标是关于你想要达到的结果,而体系是涉及导致这些结果的过程; 目标的意义在于确定大方向,但体系才能促进进步.完全忽略目标,只关注体系,仍然会成功. 结果 ...
最新文章
- Java 匿名类也能使用构造函数
- linux空间管理,教你玩转Linux—磁盘管理
- java 线上运维_一次java应用线上运维实战
- ASP.NET Core MVC 模型绑定用法及原理
- javascript面试题以及对所涉及到的知识点的总结
- android删除电池功能,Android教程:删除电池信息增加待机时间
- BP神经网络的数学原理及其算法实现
- mongo-java-driver 的简单使用(1)
- windows程序介绍
- 计算机教室的网络拓扑结构,基于网络拓扑结构的校园计算机网络系统集成设计...
- 最优化算法---可行方向之Frank-wolfe 方法(求解非线性规划问题)
- es6模块循环引用的问题
- Cocos实战案例:高手解析《捕鱼达人3》怎样玩3D
- 笔记本驱动图标消失怎么办
- 汇编实现数字的输入与输出
- 新方法破解Wi-Fi WPA2加密平均只需10分钟
- linux子进程崩溃父进程如何得知并重启子进程,子进程崩溃父进程如何得知并重启子进程...
- usnews美国大学计算机排名2021,2021年USNEWS美国大学计算机
- testlink mysql配置_testlink安装及配置
- 01 【初识Django】