8.5.2 @font face 与字体图标技术，SVG 图标同样是矢量的，同样颜色可控，但资源占用更少，加载体验更好，呈现效果更佳，更加符合语义。字体图标技术依然是非常值得推荐的技术选型，因为和传统的图片图标相比，字体图标的尺寸大小和颜色控制非常方便，开发维护方面占用流量小很多，收益是非常明显的。对字体图标，我们可以手工使用一些软件制作，但这种做法效率非常低下，也不好维护，所以基本上现在都是使用工具来完成，如使用 iconfont.cn这

font 属性 作为缩写的 font 属性：[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] ||表示或，?和正则表达式中的?的含义一致，表示 0 个或 1 个。仔细观察上面的语法，会发现font-size 和font-family 后面没有问号，也就是说是必需的，是不可以省略的。 使用关键字值的 font 属性： font:caption | icon | menu | message-box | small-caption | status-bar 如果将 font 属性设置为上面的一个值，就等同于设置 font 为操作系统该部件对应的font，也就是说直接使用

font-family font-family: 'PingFang SC', 'Microsoft Yahei';依次向右寻找本地支持的字体 font-family: serif; /* 衬线字体 */ font-family: sans-serif; /* 无衬线字体 */ font-weight font-weight: normal; font-weight: bold; font-weight: 100; font-weight 要想真正发挥潜力，问题不在于 CSS 的支持，而在于是否存在对应的字体文件。 font-style font-style: normal; font-style: italic; (当前字体的斜体) font-style: oblique;

字体，本质上是字符集和图形的一种映射关系。 字体图标技术就是把通常的字符映射成为另外的图标形状，虽然我们眼睛看到的是个图标，但是实际上它本质上就是一个普通的字符。 text-indent对文本进行缩进控制 text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素 text-indent 仅对第一行内联盒子内容有效。 非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效，如果计算值是 inline-block/inline-table 则会生效。

8.5.2 @font face 与字体图标技术 字体，本质上是字符集和图形的一种映射关系 8.6 文本的控制 8.6.1 text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制。 text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素； 仅对第一行内联盒子内容有效； 非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效； <input>标签按钮 text-indent 值无效； <button>标签按钮 text-indent 值有效（存在兼容性差异）； <input&gt

字体图标的原理是字体 + 字符 字体通过font-family进行设置，通过src属性制定字体源；在使用的时候通过设置content映射到对应的字符上，这样就实现了字体图标，将表情展示出来 因为原始字符和最终的图形表现相差很大，所以当我们的字体加载缓慢的时候，就可以看到明显的变化过程，原始字符x-height和图形x-height往往是不一样的，会影响垂直对齐等问题 text-indent用来设置缩进，但实际情况下已经使用较少，更多的是用来隐藏字体，实现SEO效果 letter-spac

@font face 与字体图标技术 字体图标技术是将图标以字体形式呈现，通过字符与图形的映射实现显示，可利用工具生成相关 CSS 代码，具有尺寸、颜色控制方便及开发维护流量小等优势，在当前桌面端 Web 项目中，因对 IE8 等浏览器的兼容需求而仍具推荐价值。建议放在:before 伪元素中 。 text-indent 与内联元素缩进 text-indent 用于文本缩进控制，设计初衷是实现文本缩进效果，但因现代 Web 形式多样，且对内容要求较高（段落掺杂英文、数字或图片时缩进可

@font face 与字体图标技术 字体图标技术是将图标以字体形式呈现，通过字符与图形的映射实现显示，可利用工具生成相关 CSS 代码，具有尺寸、颜色控制方便及开发维护流量小等优势，在当前桌面端 Web 项目中，因对 IE8 等浏览器的兼容需求而仍具推荐价值。但从长远看，由于其仅在兼容老 IE 浏览器方面有优势，对比 SVG 图标技术，随着未来 IE8 等浏览器的淘汰，使用会逐渐边缘化。SVG 图标作为矢量图标，颜色可控，在资源占用、加载体验、呈现效果和

8.5.2 @font face 与字体图标技术 字体，本质上是字符集和图形的一种映射关系 8.6 文本的控制 8.6.1 text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制。 text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素； 仅对第一行内联盒子内容有效； 非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效； <input>标签按钮 text-indent 值无效； <button>标签按钮 text-indent 值有效（存在兼容性差异）； <input&gt

@font face 与字体图标技术 @font-face { font-family: ICON; src: url(xxxx); } .icon { font-family: ICON; } text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制 letter-spacing 与字符间距 特性：继承性、默认值时normal不是0、支持负值、支持小数值 、暂不支持百分比值， 和 text-indent 属性一样，无论值多大或多小，第一行一定会保留至少一个字符。 word-spacing 与单词间距 作用就是增加空格的间隙宽度 了解 word-break 和 word-wrap 的区别 word-break: normal; word-break: break-all; word-bre

字体图标本质是字体和字符，字符一般使用伪元素实现，要注意的是因为原始的字符和最终的图形差异过大，如果字体文件比较大加载的慢一些的时候，可以明显看到字符变图形的过程。 文本：text-indent：对文本进行缩进控制，可以用来隐藏文字，text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。 letter-spacing：控制字符之间的间距，包括英文字母、汉字以及空格等，不支持百分比。 word-spacing ：单词间距。 word-break 和 word-w

1.@font face 与字体图标技术 字体图标技术的使用会越来越边缘化，因为和 SVG 图标技术相比，其唯一的优势就是兼容一些老的 IE 浏览器。等再过几年，IE8 等浏览器彻底被淘汰了，我们就没有任何使用字体图标技术的理由了。 所谓字体，本质上是字符集和图形的一种映射关系。 2.text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制。 设置一个很大的 text-indent 负值，在某些设备下有潜在的性能风险，体现在滚屏的时候会发生卡顿。text-indent 负值

font属性 font属性无效时，需检查font-size和font-family是否同时存在，font缩写会破坏部分属性的继承性。 font 缩写必须要带上 font-family,但font-family 属性值可能会很长，有两种方式解决 （1）可以随便找一个系统根本不存在的字体名占位，然后再设置 font-family:inherit 来重置这个占位字体 （2）利用@font face 规则将我们的字体列表重定义为一个字体 @font face 本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单地自定义字体，还包括字体重命名、默

font 属性 作为缩写的 font 属性：[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] ||表示或，?和正则表达式中的?的含义一致，表示 0 个或 1 个。仔细观察上面的语法，会发现font-size 和font-family 后面没有问号，也就是说是必需的，是不可以省略的。 使用关键字值的 font 属性： font:caption | icon | menu | message-box | small-caption | status-bar 如果将 font 属性设置为上面的一个值，就等同于设置 font 为操作系统该部件对应的font，也就是说直接使用

font缩写会破坏部署属性的继承性，另外font缩写必须带上font-family font关键字的价值，如非Windows系统下不要使用微软雅黑字体，就可以使用非标准的-apple-system font face的本质是变量，是一个定义字体或字体集的变量，这里包括字体重命名、默认字体样式设置等等，包括font-family src font-style font-weight unicode-range font-varient font-stretch和font-feature-settings src表示引入的字体可以是系统字体，也可以是外链字体 unicode-range的作用是可以让特定的字符或者特定范围的字

font属性 CSS 的 font 属性是多个文本样式的缩写形式，可包含 font-style、font-variant、font-weight、font-size、line-height、font-family 等属性。其完整语法要求 font-size 和 font-family 必须同时存在，否则缩写无效。 font 缩写会强制重置行高为 normal（浏览器默认值不同），导致兼容问题，建议必要时手动指定行高； 强制字体限制：缩写必须包含 font-family，若需保留原继承字体，可通过两种方法解决： - 占位字体法：用不存在字体占位（如 '☺'）后通过 font-family:

8.4 font 属性 8.4.1 作为缩写的 font 属性 font 缩写会破坏部分属性的继承性。font-size和font-family是必需的。 8.4.2 使用关键字值的 font 属性 使用关键字作为属性值的时候必须是独立的，不能添加font-family或者font-size之类。 8.4.3 font 关键字属性值的应用价值 8.5 真正了解@font face 规则 @font face 本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单地自定义字体，还包括字体重命名、默认字体样式设置等。 @font face 规则支持的 CSS 属性有 font-family、src

font属性 CSS 的 font 属性是多个文本样式的缩写形式，可包含 font-style、font-variant、font-weight、font-size、line-height、font-family 等属性。其完整语法要求 font-size 和 font-family 必须同时存在，否则缩写无效（如 font: normal 700 14px/20px 缺字体无效，而 font: 14px '☺' 语法有效）。使用 font 缩写时需注意： 继承性问题：未显式定义 line-height 时，font 缩写会强制重置行高为 normal（浏览器默认值不同），导致兼容问题，建议必要时手动指定行高； 强制字体限制：缩

8.4 font 属性 8.4.1 作为缩写的 font 属性 font 缩写会破坏部分属性的继承性。font-size和font-family是必需的。 8.4.2 使用关键字值的 font 属性 使用关键字作为属性值的时候必须是独立的，不能添加font-family或者font-size之类。 8.4.3 font 关键字属性值的应用价值 8.5 真正了解@font face 规则 @font face 本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单地自定义字体，还包括字体重命名、默认字体样式设置等。 @font face 规则支持的 CSS 属性有 font-family、src

font 属性 作为缩写的 font 属性：[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] ||表示或，?和正则表达式中的?的含义一致，表示 0 个或 1 个。仔细观察上面的语法，会发现font-size 和font-family 后面没有问号，也就是说是必需的，是不可以省略的。 使用关键字值的 font 属性： font:caption | icon | menu | message-box | small-caption | status-bar 如果将 font 属性设置为上面的一个值，就等同于设置 font 为操作系统该部件对应的font，也就是说直接使用

font-family的值有两类： 1. 字体名：字体类型的名字 2. 字体族：如衬线字体和无衬线字体 所谓衬线字体，就是笔画开始、结束的地方有额外的装饰而且笔画的粗细会有所不同的字体。无衬线字体就是没有这些额外的装饰且粗细相同 等宽字体主要是对于英文而言的，中文字体基本都是等宽字体 IOS字体中的SC，是指Simplified Chinese font-weight为数字值时从100到900，必须是100的整数倍，有时候发现设置某个数值不生效，主要原因是没有对应的字体

font-family的值有两类： 1. 字体名：字体类型的名字 2. 字体族：如衬线字体和无衬线字体 所谓衬线字体，就是笔画开始、结束的地方有额外的装饰而且笔画的粗细会有所不同的字体。无衬线字体就是没有这些额外的装饰且粗细相同 等宽字体主要是对于英文而言的，中文字体基本都是等宽字体 IOS字体中的SC，是指Simplified Chinese font-weight为数字值时从100到900，必须是100的整数倍，有时候发现设置某个数值不生效，主要原因是没有对应的字体

font-family的值分为两类： 1. 字体名：字体类型的名字 2. 字体族：如衬线字体和无衬线字体 所谓衬线字体，就是笔画开始、结束的地方有额外的装饰而且笔画的粗细会有所不同的字体。无衬线字体就是没有这些额外的装饰且粗细相同 等宽字体主要是对于英文而言的，中文字体基本都是等宽字体 IOS字体中的SC，是指Simplified Chinese font-weight为数字值时从100到900，必须是100的整数倍，有时候发现设置某个数值不生效，主要原因是没有对应的字体

8.2 font-family font-family 支持两类属性值，一类是“字体名”，一类是“字体族”。 字体名：simsun、Microsoft Yahei… 字体族：serif（衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）… 8.2.1 了解衬线字体和无衬线字体 衬线字体：笔画开始、结束的地方有额外装饰而且笔画的粗细会有所不同的字体； 无衬线字体：没有这些额外的装饰，而且笔画的粗细差不多； 8.3 字体家族其他成员 8.3.1 font-weight font-weight 表示“字重”，文字的粗细程度。 用数值

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。 定位元素一旦设置了z-index值，从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了很大的z-index值也无法覆盖其他元素的问题。 避免z-index“一山比一山高”的样式混乱问题。 第8章 强大的文本处理能力 8.1 font-size 1、line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于

8.2 font-family font-family 支持两类属性值，一类是“字体名”，一类是“字体族”。 字体名：simsun、Microsoft Yahei… 字体族：serif（衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）… 8.2.1 了解衬线字体和无衬线字体 衬线字体：笔画开始、结束的地方有额外装饰而且笔画的粗细会有所不同的字体； 无衬线字体：没有这些额外的装饰，而且笔画的粗细差不多； 8.3 字体家族其他成员 8.3.1 font-weight font-weight 表示“字重”，文字的粗细程度。 用数值

衬线字体和无衬线字体 衬线字体（Serif）和无衬线字体（Sans Serif）是文字设计的两大基础分类。衬线字体的特征在于笔画起止处带有装饰性细节（如钩线或三角形），且笔画粗细对比明显，例如英文的Times New Roman和中文的宋体。这种设计源于古罗马石刻工艺，工匠为消除雕刻毛边自然形成衬线，其核心功能是通过视觉引导增强文字连续性，因此传统印刷品（如书籍、报纸）多采用衬线字体排版，以提升长段落的可读性。无衬线字体则笔画均匀、造型

font-family font-family: 'PingFang SC', 'Microsoft Yahei';依次向右寻找本地支持的字体 font-family: serif; /* 衬线字体 */ font-family: sans-serif; /* 无衬线字体 */ font-weight font-weight: normal; font-weight: bold; font-weight: 100; font-weight 要想真正发挥潜力，问题不在于 CSS 的支持，而在于是否存在对应的字体文件。 font-style font-style: normal; font-style: italic; (当前字体的斜体) font-style: oblique;

1.BFC 的定义：BFC 全称为 block formatting context，中文为“块级格式化上下文”。相对应的还有 IFC，也就是 inline formatting context，中文为“内联格式化上下”。 如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。 BFC 元素是不可能发生 margin 重叠的，因为 margin重叠是会影响外面的元素的 BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位。 会触发 BFC：

float的本质和特性 本质：为了实现文字环绕效果 缺点：缺少弹性，容错性很糟糕 特性：包裹性，块状化并格式化上下文，破坏文档流，没有任何margin合并 float的作用机制 float 属性会让父元素的高度塌陷 float 属性让父元素高度塌陷的原因就是为了实现文字环绕效果 “文字环绕效果”是由两个特性（即“父级高度塌陷”和“行框盒子区域限制”）共同作用的结果 float 更深入的作用机制 IE6和IE7浮动元素会下一行显示 浮动锚点是float元素所在的“流”中

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 的值，z-index 值没有任何道理需要超过 2。 1.定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。 2.容易出现z-index层级管理混乱的问题 8.1font-size 1.line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于 line-height 计算的。 8.1.2 理解 font-size

z-index的使用建议不过2，主要原因是可以通过合理的布局来避免z-index，因为当z-index不设限制的时候，不同的开发者会设定越来越高的z-index值，从而导致层级混乱，尤其是当一个z-index调整时会影响另一个，这一点在我们的代码中也有体现，出现过类似的case vertical-align的百分比是相对于line-height计算的，这两者有联系 ex是字符的高度 1em等于当前元素所在的font-size的计算值 rem是相对于根元素的，我们的适配用的就是rem font-size的关键字，有一定的对应规则

7.7 z-index“不犯二”准则。对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。为什么需要这个准则。（1）定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。（2）避免 z-index“一山比一山高”的样式混乱问题。8.1 line-height 的另外一个朋友 font-size。 line-height 的数值属性值和百分比值属性值都是相对于 font

7.2 理解 CSS 世界的层叠上下文和层叠水平 7.2.1 层叠上下文：z 轴，表示的是用户与显示器之间这条看不见的垂直线。 7.2.2 层叠水平：元素发生层叠时有着特定的垂直显示顺序。 7.4 层叠准则 1、谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 2、后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。 7.5 深入了解层

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。 定位元素一旦设置了z-index值，从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了很大的z-index值也无法覆盖其他元素的问题。 第8章 强大的文本处理能力 8.1 font-size 1、line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于 line-height 计算的。 在 CSS 中，1em 的计算值等同

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。 定位元素一旦设置了z-index值，从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了很大的z-index值也无法覆盖其他元素的问题。 避免z-index“一山比一山高”的样式混乱问题。 第8章 强大的文本处理能力 8.1 font-size 1、line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于