第8章.md

em 在传统排版中指一个字模的高度,其一般由'M'的宽度决定（因为宽高相同），所以叫 em

em 就是'中'等汉字的高度！

h1 {
 font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
}
<!-- margin-before为2*16*0.67 = 21.44px -->```

1em 的计算值等同于当前元素所在的 font-size 计算值

font-size 的关键字属性值分以下两类。

（1）相对尺寸关键字。指相对于当前元素 font-size 计算，包括：

• larger：大一点，是<big>元素的默认 font-size 属性值。
• smaller：小一点，是<small>元素的默认 font-size 属性值。
• xx-large：好大好大，和<h1>元素计算值一样。
• x-large：好大，和<h2>元素计算值一样。
• large：大，和<h3>元素计算值近似（“近似”指计算值偏差在 1 像素以内，下同）。
• medium：不上不下，是 font-size 的初始值，和<h4>元素计算值一样
• small：小，和

  元素计算值近似。

• x-small：好小，和

  元素计算值近似。

• xx-small：好小好小，无对应的 HTML 元素。

font-size:0.0000001px，都还是会被当作 12px 处理的

html 设置 font-size 为 14px 跟 87.5%区分--只在用户修改浏览器字号时有区别

font-family 不区分大小写，如果有空格，需要引号

衬线字体，笔画开始结束有装饰，并且笔画粗线有不同的字体

font-family: sans-serif;

中文衬线字体是“宋体”，常用英文衬线字体有 Times New Roman、Georgia

等宽字体是对英文而言的，因为中文都等宽，常见的有 Consolas、Monaco、monospace

等宽字体可以模拟 border 的 solid、dashed 和 dotted

1ch 表示一个 0 字符的宽度，应用场景比如输手机号

“SC”指的是“简体”（simplified chinese）的意思，相对应的还有“TC”，指的是“繁体”（traditional chinese）的意思

font-weight，必须是 100 ～ 900 的整百数。400 对应 normal，700 对应 bold；也支持 lighter、bolder

font-weight:100，然后再 font-weight:bolder 后的 font-weight 计算大小是 400；500 的 bolder 是 700！

所有这些 font-weight 数值关键字浏览器都是支持的，之所以没有看到任何粗细的变化，是因为我们的系统里面缺乏对应粗细的字体。

font-style 中，italic 是使用当前字体的斜体字体，而 oblique 只是单纯地让文字倾斜

font-variant :small-caps 小体型大写字母

font 简写 [ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ]

font-size 和 font-family 必选

font 缩写会破坏部分属性的继承性

.font { font: 400 30px 'Microsoft Yahei'; }
<!-- line-height被重置为normal -->

如何避免设置 font 时，字体需要重置

<!-- 随便设置个什么字体，然后用 font-family: inherit;重新覆盖 -->
.font {
 font: 30px/30px '☺';
 font-family: inherit;
}
<!-- @font face 规则将我们的字体列表重定义为一个字体 -->

font 系统字

• caption：活动窗口标题栏使用的字体。
• icon：包含图标内容所使用的字体，如所有文件夹名称、文件名称、磁盘名称，甚至览器窗口标题所使用的字体。
• menu：菜单使用的字体，如文件夹菜单。
• message-box：消息盒里面使用的字体。
• small-caption：调色板标题所使用的字体。
• status-bar：窗体状态栏使用的字体。

  caption、icon、message-box 在 chrome 无效

选择系统字体

body { font-size: 16px; }

<!-- or -->
html { font-family: system-ui; }

font-face 常用属性

@font-face {
  font-family: "example";
  /* src如果是系统字体，可以使用local；外部字体则用url */
  src: url(example.ttf);
  font-style: normal;
  font-weight: normal;
  unicode-range: U+0025-00FF;
}

font-family 可以自定义，但是不能跟系统中的冲突

@font-face {
  font-family: ICON;
  src: url("icon.eot") format("eot");
  /* IE9 之前的版本解析有一个严重的问题，
当 src属性包含多个 url()时，
会把长长的字符当作一个地址解析而返回 404 错误。
因此把 eot格式放在第一位，然后在字体文件 url 地址后加上问号，
这样 IE9 之前的版本会把问号之后的内容当作 url 的参数 */
  src: url("icon.eot?#iefix") format("embedded-opentype"), url("icon.woff2")
      format("woff2") url("icon.woff") format("woff"),
    url("icon.ttf") format("typetrue"), url("icon.svg#icon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* format不建议省略，让浏览器提前知道字体格式  */

• svg 格式是为了兼容 iOS 4.1 及其之前的版本
• eot 为 IE 私有格式，但是其他浏览器都支持
• woff 是 web open font format 几个词的首字母简写，是专门为 Web 开发而设计的字体，建议优先使用
• woff2 是比 woff 尺寸更小的字体
• ttf 比较常见，缺点是比较大，安卓 4.3 以前需要使用这个字体

图标 font-face 最终优化，既兼容 IE 又简洁

@font-face {
 font-family: ICON;
 src: url('icon.eot');
src: local('☺'),
url('icon.woff2') format("woff2"),
url('icon.woff') format("woff"),
url('icon.ttf');
}

标签天然有 font-style:italic

汉仪旗黑支持字重

@font-face {
 font-family: 'QH';
 font-weight: 500;
 src: local('HYQihei 50S');
}
@font-face {
 font-family: 'QH';
 font-weight: 600;
 src: local('HYQihei 60S');
}
<!-- 解读一下就是：是一个全新的字体，名为'QH'。当字重 font-weight 为 400 的时候，
使用“汉仪旗黑 40S”字重字体；为 500 的时候，使用“汉仪旗黑 50S”字重字体 -->

.hy-40s,
.hy-50s,
.hy-60s {
 font-family: 'QH';
}
.hy-40s {
 font-weight: 400;
}
.hy-50s {
 font-weight: 500;
}
.hy-60s {
 font-weight: 600;
}

让图标也具有响应式

@font-face {
  font-family: ICON;
  src: url(icon-large.eot);
  src: local("☺"), url(icon-large.woff);
  font-weight: 700;
}
@font-face {
  font-family: ICON;
  src: url(icon-medium.eot);
  src: local("☺"), url(icon-medium.woff);
  font-weight: 400;
}
@font-face {
  font-family: ICON;
  src: url(icon-small.eot);
  src: local("☺"), url(icon-small.woff);
  font-weight: 100;
}
/* 使用 */
.icon {
  font-family: ICON;
}
.icon-large {
  font-weight: 700;
  font-size: 128px;
}
.icon-medium {
  font-weight: 400;
  font-size: 64px;
}
.icon-small {
  font-weight: 100;
  font-size: 16px;
}

unicode-range 的作用是可以让特定的字符或者特定范围的字符使用指定的字体

@font-face {
 font-family: quote;
 src: local('SimSun');
 unicode-range: U+201c, U+201d;
}

字体图标技术就是使用类似的原理实现的，即把通常的字符映射成为另外的图标形状

字体图标技术的缺陷

• 当我们的字体文件加载缓慢的时候，可以明显看到字符变图形的过程
• 原始的字符 x-height 和最终的图形 x-height 往往是不一样的
• 原始字符的 ch 宽度，也就是水平占据的宽度和最终的图形也是不一样的

.icon-microphone:before {
 content: '\1f3a4'
}
<!-- 不推荐下面的，SEO不友好 -->
 <i class="icon">&#x1f3a4;</i>

text-indent 负值隐藏文本

(此条规则已过时)text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素

text-indent 实现已知宽度水平居中布局

box {
 text-indent: 50%;
}
.box img {
 width: 256px;
 margin-left: -128px;
}

form 样子的布局

p {
 text-indent: -3em;
 padding-left: 3em;
}
<p>提问：问题内容...</p>
<p>回答：回答内容...</p>

text-indent 注意点

• text-indent 仅对第一行内联盒子内容有效
• 非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效,如果计算值是 inline-block/inline-table 则会生效
• 标签按钮 text-indent 值无效
• 标签按钮 text-indent 值有效

letter-spacing 实现文字反转

.lt {
 letter-spacing: -2em;
}
<p class="lt">一二三四五</p>

letter-spacing 特性

• 继承性
• 默认值是 normal 而不是 0,虽然很多情况下 0 和 normal 没区别
• 支持负值
• 和 text-indent 属性一样，无论值多大或多小，第一行一定会保留至少一个字符
• 支持小数值，即使 0.1px 也是支持的，但并不总能看到效果，这与屏幕的密度有关
• 不支持百分比

文字飞入功能

.title {
 animation: textIn 1s both;
}
@keyframes textIn {
 0% {
 letter-spacing: -200px;
 }
 100% {
 letter-spacing: 0;
 }
}

word-spacing 特性

• 继承性
• 默认值都是 normal 而不是 0
• 都支持负值，都可以让字符重叠
• 都支持小数值
• CSS3 支持百分比
• 间隔算法都会受到 text-align:justify 两端对齐的影响

word-spacing 的作用就是增加空格的间隙宽度，不包括零宽空格（U+200B、U+200C、U+200D）、固宽空格（全角 U+3000、U+2003，半角 U+2000、U+2002）以及窄空格（U+ 2009），支持 tab、nbsp、换行空格、非换行空格（U+00A0)

word-break: normal;默认换行规则

word-break:break-all 允许非 CJK 文字间单词断行

不允许 CJK 文本中的单词换行，只能在半角空格或连字符处换行。非 CJK 文本的行为实际上和 normal 一致。

word-wrap 新名字 overflow-wrap

word-wrap 中 normal：就是大家平常见得最多的正常的换行规则。break-word：一行单词中实在没有其他靠谱的换行点的时候换行

word-break:break-all 的作用是所有的都换行，一点儿空隙都不放过，而 word-wrap:break-word ，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况

white-space

• normal：合并空白字符和换行符
• pre：空白字符不合并，并且内容只在有换行符的地方换行
• nowrap：该值和 normal 一样会合并空白字符，但不允许文本环绕
• pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕
• pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕

属性	换行	空格和制表	文字环绕
normal	合并	合并	环绕
nowrap	合并	合并	不环绕
pre	保留	保留	不环绕
pre-wrap	保留	保留	不环绕
pre-line	保留	合并	环绕

中文两端对齐效果(IE 和其他浏览器都支持)

.justify {
 text-align: justify;
 text-justify: inter-ideograph;
}

text-align:justify 要想有两端对齐的效果，需要满足两点：一是有分隔点，如空格；二是要超过一行，此时非最后一行内容会两端对齐

text-align-last 属性，可以规定最后一行内联内容的排列方式

两端对齐的折中实现

.justify {
 text-align: justify;
 font-size: 0; /*消除幽灵空白节点*/
}
.justify:after {
 content: "";
 display: inline-table; /* 也可以是 inline-block */
 width: 100%;
}
<!-- 但是如果 font-size 设为 0，IE其样式表现就好像空
格根本不存在一样，无法两端对齐。 -->
<!-- hack -->
.justify {
 text-align: justify;
 font-size: .1px;
 font-size: -webkit-calc(0px + 0px);
}
.justify li {
 display: inline-block;
 font-size: 14px;
}

justify 消除最后一行的间隔

<ul class="justify">
 <li><img src="1.jpg"><p>描述 1</p></li>
 <li><img src="2.jpg"><p>描述 2</p></li>
 <li><img src="3.jpg"><p>描述 3</p></li>
 <li><img src="4.jpg"><p>描述 4</p></li>
 <li><img src="5.jpg"><p>描述 5</p></li>
 <li class="placeholder"></li>
 <li class="placeholder"></li>
 <li class="placeholder"></li>
</ul>
<!-- 列表宽度是 128px，
.placeholder {
 display: inline-block;
 width: 128px;
 vertical-align: bottom;
}
 -->
 <!-- 关于占位标签的个数。占位标签的个数和列表的列数保持一样就可以了，100%实现符
合预期的布局效果，多了浪费，少了不行 -->

text-decoration:underline 文字和下划线重叠在一块

<!-- 解决 -->
a {
 text-decoration: none;
 border-bottom: 1px solid;
}

标签默认的 text-decoration 的属性值就是 line-through，因此类似原价删除效果。直接价格外面套一个标签即可

text-decoration 支持多值

a {
 text-decoration: underline overline;
}

text-transform 也是为英文字符设计的，要么全大写 text-transform:uppercase，要么全小写 text-transform:lowercase

• 用于身份证输入
• 用于验证码输入

:表示伪类，:: 表示伪元素

::first-letter 的语义：首字符作为元素的假想子元素

元素的 display 计算值必须是 block、inline-block、list-item、table-cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table 和 display:flex 等

辅助字符不算第一个

p:first-letter { color: silver; }
<!-- ？？？？？？？辅变色了 -->
<p>？？？？？？？辅助</p>

正常情况下可以直接作为伪元素的字符就是数字、英文字母、中文、$、一些运算符，以及非常容易被忽视的空格等

<!-- 全是黑色，因为因为多了一个 display 值是inline-block 尺寸为 0 的<i>元素 -->
p:first-letter { color: silver; }
<p><i style="display:inline-block"></i>银色</p>

::before 伪元素也参与::first-letter 伪元素

p:before {
 content: '新闻：';
}
p:first-letter {
 color: silver;
}
<p>这是新闻的标题……</p>
<!-- 新变银色了 -->

::first-letter 只有部分 CSS 元素生效,visibility:hidden 或者 display:none 对 first-letter 是无效的

• 所有字体相关属性：font、font-style、font-variant、font-weight、font-size、line-height 和 font-family。
• 所有背景相关属性：background-color、background-image、background-position、background-repeat、background-size 和 background-attachment。
• 所有 margin 相关属性：margin、margin-top、margin-right、margin-bottom 和 margin-left。
• 所有 padding 相关属性：padding、padding-top、padding-right、padding-bottom 和 padding-left。
• 所有 border 相关属性：缩写的 border、border-style、border-color、 border-width 和普通书写的属性。
• color 属性。
• text-decoration、text-transform、letter-spacing、word-spacing（合 适情境下）、line-height、float 和 vertical-align（只有当 float 为 none 的时候）等属性。

first-letter 支持部分 display 属性值标签嵌套

display 值如果是 inline、block、table、table-row、table-caption、table-cell、list-item 都是可以的，但是不能是 inline-block 和 inline-table，否则::first-letter 伪元素会直接无效；而 display:flex 则 改变了规则，直接选择了下一行的字符内容。

颜色权重多了一层

p:first-letter {
 color: red;
}
p > span {
 color: blue!important;
}
<p><span>第一个</span>字符看看会不会变红？</p>
<!-- ’第‘是红色的 -->
<!-- ::first-letter 伪元素其实是作为子元素存在的，或者说应当看出是子元素 -->

first-letter 的妙用

.price:first-letter {
 margin-right: 5px;
 font-size: xx-large;
 vertical-align: -2px;
}
<p>¥399</p>

:first-line 特性

• first-line 和:first-letter 伪元素一样，IE9 及以上版本浏览器支持双冒号::first-line{}写法，IE8 浏览器只认识单冒号写法。
• :first-line 和:first-letter 伪元素一样，只能作用在块级元素上，也就是 display 为 block、inline-block、list-item、table-cell 或者 table-caption 的元素设置:first-line 才有效，table、flex 之类都是无效的。
• :first-line 和:first-letter 伪元素一样，仅支持部分 CSS 属性，例如：所有字体相关属性；color 属性； 所有背景相关属性；text-decoration、text-transfor、letter-spacing、word-spacing、line-height 和 vertical-align 等属性。
• :first-line 和:first-letter 伪元素一样，color 等继承属性的权重总是多了 一层，毕竟称为“伪元素”，就好像里面还有个子元素。:first-letter CSS 权重比:first-line 高
• :first-line 和:first-letter 伪元素一样，也支持标签嵌套，但是具体细则和:first-letter 出入较大，例如，它不支持 table 相关属性等。