第8章文本处理能力

ZGuangJu 9/23/2018 前端基础CSSCSS教程

# 第8章文本处理能力

# `line-height`的另一个朋友`font-size`

vertical-align百分比值属性是相对于line-height计算，line-height的数值属性和百分比值都是相对于font-size计算。

# `font-size`和`vertical-align`的隐秘故事

<p data-height="265" data-theme-id="0" data-slug-hash="jpzveQ" data-default-tab="css,result" data-user="whjin" data-pen-title="图标垂直居中" class="codepen">See the Pen <a href="https://codepen.io/whjin/pen/jpzveQ/">图标垂直居中</a> by whjin (<a href="https://codepen.io/whjin">@whjin</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

原理：内联元素默认基线对齐，图片的基线是图片的下边缘，文字内容的基线是字符x下边缘。图片下边缘和文字字形边缘往上位置对齐。通过vertical-align:25%声明让图片的下边缘和中文汉字的中心线对齐。

# 理解`font-size`与`ex`、`em`和`rem`的关系

总结：1em的计算值等同当前元素所在的font-size计算值。

# 理解`font-size`的关键字属性值

相对尺寸关键字。larger、smaller
绝对尺寸关键字。xx-large、x-large、large、medium、small、x-small、xx-small

容器设置font-size:medium，此时这个局部展示区域的字号跟随浏览器的设置，默认计算值是16px。
容器内的文字字号全部使用相对单位，如百分比值或em，然后基于16px进行转换。

# `font-size:0`与文本的隐藏

隐藏logo对应元素内的文字，除了text-indent缩进隐藏外，还可以使用以下方法：

.logo {
    font-size: 0;
}

# 字体属性家族`font-family`

font-family支持两类属性值，一类是字体名，一类是字体族。

字体族：

serif：衬线字体
sans-serif：无衬线字体
monospace：等宽字体
cursive：手写字体
fantasy：奇幻字体
system-ui1：系统UI字体

# 了解衬线字体和无衬线字体

字体分衬线字体和无衬线字体。

中文衬线字体宋体，英文衬线字体Times New Roman、Georgian等；
无衬线字体，中文雅黑字体，英文Arial、Verdana、Tahoma、Helivetica、Calibra等。

# 等宽字体的实践价值

1. 等宽字体与代码呈现

2. 等宽字体与图形呈现

3. ch单位与等宽字体布局

1ch表示一个0字符的宽度。

# 中文字体和英文名称

Windows常见内置中文字体和对应英文名称。

字体中文名	字体英文名
宋体	SimSun
黑体	SimHei
微软雅黑	Microsoft Yahei
微软正黑体	Microsoft JhengHei
楷体	KaiTi
新宋体	NSimSun
仿宋	FangSong

# 一些补充说明

微软正黑体是一款全面支持ClearType技术的TrueType无衬线字体，用于繁体中文系统。

# 字体家族其他成员

# `font-weight`

# `font-style`

font-style:normal
font-style:italic，使用当前字体的斜体
font-style:oblique，单纯让文字倾斜

# `font-variant`

# `font`属性

# 缩写的`font`属性

完整语法：[font-style||font-variant||font-weight]?font-size[/line-height]?font-family，（font-size和font-family是必需项）。

font缩写会破坏部分属性的继承性，必须要带上font-family。利用@font face规则将字体列表重定义为一个字体。

# 使用关键字值得`font`属性

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

使用关键字作为属性值必须是独立的，不能添加font-family或font-size等。

# `font`关键字属性值的应用价值

//推荐使用
html {font: menu;}
body {font-size: 16px;}

html {font: small-caption;}
body {font-size: 16px;}

html {font: status-bar;}
body {font-size: 16px;}

# `@font face`规则

# `@font face`的本质是变量

@font face的本质上就是一个定义字体或字体集的变量，包括字体重命名、默认字体样式设置等。

@font face规则支持的CSS属性有font-family、src、font-style、font-weight、unicode-range、font-variant、font-stretch和font-feature-settings。

@font-face {
    font-family: 'example';
    src: url("example.ttf");
    font-style: normal;
    font-weight: normal;
    unicode-range: U+0025-00FF;
    font-variant: small-caps;//忽略
    font-stretch: expanded;//忽略
    font-feature-settings: "ligal" on;//忽略
}

1. font-family

@font-face {
    font-family: '$';
    src: url("example.ttf");
}

2. src

如果是使用系统字体，则使用local()功能符；如果使用外链字体，则使用url()功能符。

@font-face {
    font-family: ICON;
    src: url("icon.eot") format('eot');
    src: url("icon.eot?#iefix") format("embedded-opentype"),
    url("icon.woff2") format("woff2"),
    url("icon.woff") format("woff"),
    url("icon.ttf") format("truetype"),
    url("icon.svg#icon") format("svg");
    font-style: normal;
    font-weight: normal;
}

eot格式是IE私有的。（舍弃）
woff是专门为Web开发而设计的字体格式。（次优先使用）
woff2是比woff尺寸更小的字体，是Web开发首选字体。（优先使用）
ttf格式作为系统安装字体比较多。（舍弃）

推荐使用方法：

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

3. font-style

4. font-weight

5. unicode-range

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

# `@font face`与字体图标技术

.icon {
    font-family: ICON;
}

.icon-microphone:before {
    content: '\1f3a4';
}

# 文本的控制

# `text-indent`与内联元素缩进

text-indent负值隐藏文本内容。

See the Pen text-indent与纯文本对齐布局 by whjin (@whjin) on CodePen.

text-indent仅对第一行内联盒子内容有效；
非替换元素以外的display计算值为inline的内联元素设置text-indent值无效，如果计算值是inline-block/inline-table则会生效。因此，如果父级块状元素设置了text-indent属性值，子inline-block/inline-table需要设置text-indent:0重置。
input标签按钮text-indent值无效。
button标签按钮text-indent值有效，但存在兼容性问题。
input和textarea输入框的text-indent在低版本IE下有兼容性问题。

# `letter-spacing`与字符间距

letter-spacing特性：

继承性；
默认值是normal不是0。
支持负值，且值足够大时会让字符形成重叠，甚至反向排列。
第一行都会保留至少一个字符。
支持小数值。
暂时不支持百分比值。

# `word-spacing`与单词间距

word-spacing和letter-spacing共同特性：

具有继承性；
默认值都是normal。
都支持负值，都可以让字符重叠，不适合使用word-spacing来清除空白间隙。
都支持小数值。
间隔算法都会受到text-align:jusitify两端对齐的影响。

两者差异：

letter-spacing作用域所有字符，word-spacing仅作用于空格字符（增加空格的间隙宽度）。

# 了解`word-break`和`word-wrap`的区别

word-break属性语法：

word-break:normal：
word-break:break-all：允许任意非CJK（Chinese/Japanese/Korean）文本间的单词断行
word-break:keep-all：不允许CJK文本中的单词换行，只能在半角空格或连字符处换行。实际上和normal一致。移动端不适合使用这个属性值。

word-wrap语法：

word-wrap:normal：正常的换行规则
word-wrap:break-word：一行单词中没有换行点时换行，CSS3中名称overflow-wrap

word-break:break-all的作用是所有的都换行，而word-wrap:break-word则是如果这一行文字有了可换行的点（如空格或CJK等），就在这些换行点换行。

See the Pen word-break:break-all和word-wrap:break-word的区别 by whjin (@whjin) on CodePen.

# `white-space`与换行和空格的控制

1. white-space的处理模型

white-space属性声明了如何处理元素内的空白字符，包括空格键Space、回车键Enter、制表符Tab产生的空白。white-space可以决定图文内容是否在一行显示（回车键是否生效），是否显示大段连续空白（空格是否生效）等。

其属性值包括：

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

white-space的功能有3个维度，分别是：是否合并空白字符、是否合并换行符、文本是否自动换行。

`white-space`不同属性值功能示意

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

2. white-space与最大可用宽度

当white-space设置为nowrap时，元素的宽度表现为最大可用宽度，换行符和一些空格全部合并，文本一行显示。

包含块尺寸大小处理。绝对定位和inline-block元素都具有包裹性，当文本内容宽度超过包含块宽度时，就会发生文本环绕现象。
单行文字溢出...效果。text-overflow:ellipsis;文字内容超出打点效果离不开white-space:nowrap;声明。
水平列表切换效果。如果列表的数目是不固定的，使用white-space:nowrap;使列表一行显示。

# `text-align`与元素对齐

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

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

.justify {
    text-align-last: justify;
}

这个方法存在兼容性问题。

# 如何解决`text-decoration`下划线和文本重叠的问题

对于纯内联元素，垂直方向的padding属性和border属性对原来的布局定位等没有任何影响。

使用border-bottom模拟text-decoration下划线解决文本重叠的问题

# `text-transform`字符大小写

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

1. 场景一：身份证输入

2. 场景二：验证码输入

# 了解`:first-letter/:first-line`伪元素

# 深入`:first-letter`伪元素及其实例

1. ::first-letter伪元素生效的前提

元素的display计算值必须是block、inline-block、list-item、table-cell/table-caption，其他值没有用。
可以直接作为伪元素的字符是数字、英文字母、中文、$、一些运算符，以及一些“空格”。
字符前面不能有图片或inline-block/inline-table之类的元素存在。

2. ::first-letter伪元素可以生效的CSS属性

字符被选做::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/right/bottom/left。
所有padding相关属性：padding、padding-top/right/bottom/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时）等属性。

3. ::first-letter伪元素特点

支持部分display属性值标签嵌套。::first-letter伪元素获取可以跨标签，不仅能选择匿名内联盒子，还能透过层层标签进行选择。
- display值是inline、block、table、table-row、table-caption、table-cell、list-item有效。
- inline-block/inline-table无效。
- display:flex直接选择下一行的字符内容。
颜色等权重总是多了一层。::first-letter伪元素作为子元素存在，对于color继承属性，子元素的CSS设置一定比父元素的级别要高，即使使用了!important，子元素会先继承，然后再应用自身设置。
```
 p:first-letter {
     color: #cd0000; /*第一个字符的颜色是red*/
 }

 p > span {
     color: blue !important;
 }
 <p><span>第一个</span>字符会不会变成红色？</p>
```

4. ::first-letter伪元素实际应用

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

## `:first-line`伪元素 ##

- 只能作用在块级元素上`block/inline-block/list-item/table-cell/table-caption`
- 仅支持部分CSS属性
 - 所有字体相关属性
 - `color`属性
 - 所有背景相关属性
 - `text-decoration`、`text-transfor`、`letter-spacing`、`word-spacing`、`line-height`和`vertical-align`
 - 支持标签嵌套。不支持`table`属性

第7章层叠规则第9章元素的修饰与美化

ZGuangJu'S NoteBook

Choose mode