CSS的字体和文本

1.文本格式化

1. 字体属性

（1）字体大小

字体大小可以使用不同的单位，如 px、pt、em、rem、vw 等等，不允许负值像素，尽量不出现小数。pt 是 ui 经常会用的单位，dpi： 直接来说就是一英寸多少个像素点，可以理解为像素密度，pt = px \* dpi / 72 ，遇到 pt 的设计图怎么处理，pc 端页面使用 px，移动端可以使用 em，rem 以及 vw

- `font-size: 30px;`字体号属性

- 取值，如 px、pt、em、rem、vw 等等，不允许负值像素，尽量不出现小数。

  - px 像素

  - pt 磅

  - em 父级元素的倍数

  - rem 根标签的倍数

  - vw 视窗尺寸

用户的浏览器默认渲染的文字大小是“16px”（大多数浏览器）“em”是一个相对的大小，相对的是"父级元素"的字体大小，我们可以这样来设置 1em，0.5em，1.5em。

（2）字体系列

在选择字体之前，一定要按照产品要求赋值，要确定用户有该字体，或者可能有该字体。字体不要只写中文，最好英文中文一起加入，并把该字体的英文描述写在前面。

- `font-family`属性设置所需要的字体

- 一个单词的可以之际使用，多个单词组成词组的用引号括起来，中文尽量用引号括起来

- 多个字体列表按照顺序从前往后查找执行

需要字体库的支持，用户字库中含有的字体。在 word 中查看当前电脑的字体库。一般情况下直接放在 html 标签下应用因为字体是继承的。

很多字体商用是收费的，因此在使用字体之前，需要参照公司，或者产品提供的字库列表，如果没有特别说明需要自己提问，这样显得更加专业。企业会指定字库，要考虑版权，商用和非商用的字体方案。

推荐字体序列

移动端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;

pc端(含Mac)项目：

font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self;

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;

（3）字体字重

字体字重就是字体粗细，但根据浏览器的不同可能展现的粗细表现也不同，因此有些值的差别看不出来，尤其是移动端，要提醒 ui 不要太细，不要太粗，显得更专业

- `font-weight`字体的字重，字的粗细

- 于 1 和 1000 之间的数字类型值，必须要是 100 的倍数。

- 常用关键词：normal（400 默认）、bold（700）、lighter（300）

- 浏览器不同展现效果不同，需要注意

（4）字体样式

在一般情况下，因为部分标签带有自己的样式，所以一些公司在 css 样式重置的时候会先把所有的字体样式搞成统一的，比如具有斜体的`<i>`标签,会先把它变成默认样式再进行操作。

【注意】加粗的标签也会变成默认粗细。不建议使用标签做斜体 

- `font-style`字体样式属性

- `font-style: normal;` 默认正常

- `font-style: italic;` 斜体

（6）字体的简写方式

- `font:italic 400 40px chiller;`

- 顺序：字体样式 字重 字号 字体系列，不可改变顺序

- 最简方式 `font：40px chiller; `字号和字体系列，不能再减少

2. 文本属性

（1）字体颜色

注意：不同终端展示颜色可能不同，尽量使用 web 安全色，或者沟通颜色的要求

- color：颜色的色值

- 取值:英文，十六进制，rgba()，其他

（2）文本的水平对齐方式

- `text-align`针对块级元素中的内联元素，它需要写在父级（块级元素）中，不能写在子元素中（文字本身和内联元素）

- 取值

  - `left`默认,左对齐

  - `center`居中对齐

  - `right`右对齐

- 内联元素（单个）与文字（单行）在父级水平居中的方式：是对块级元素中的文字，或对块级元素的内联元素水平居中，这个元素需要给父级（块元素），块级元素的水平居中不能使用该属性。

(3) 文本的行高

- `line-height`属性可以设置文本的行间距,可使用长度单位 px，或使用无单位的倍数如 1，1.5，2

- 文本的行高包括文字上下间距+文本高度，文本居中上下行间距相等

- 使行间距等于元素高度，则“单行文本”垂直显示在元素中

- 常用场景

- 行元素在块元素里上下左右居中（行高等于父级元素高度）

- 增加元素的文字行间距（在父元素设置，子元素也会生效）

 (4) 文本的线条修饰

在使用 a 标签的时候有一个默认下划线,有时不需要,在 css reset 中将 a 标签的默认下划线去掉

- `text-decoration: none;`无线条

- `text-decoration: underline;`下划线

- `text-decoration: overline;`上划线

- `text-decoration: line-through;` 删除线

（5）首行缩进

- `text-indent`指定块容器中第一行文本的缩进

- `text-indent:2em`两倍的字体大小,相当于空两格

 (6)文本的换行

- 文本换行的原因

  - 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的`white-space:normal`,当定义的宽度之后自动换行。

  - 对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中，英文字母之间没有空格的话，它会默认认为这是一个英文单词，所以单词就一次输出不换行

- 换行属性

  - `white-space: nowrap;`不换行

  - `word-wrap:break-word;`强制换行

（7）文字阴影

文字阴影和盒子阴影类似,都需要具有关键的内容,但没有内阴影

- `text-shadow`为文字添加阴影。

- 可以添加多个阴影，阴影值之间用逗号隔开。

- 参数：

  - 第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量,长度单位，可以为负值。

  - 第三个值代表：模糊半径的大小（羽化）。【可选】

  - 第四个值代表：颜色值。【可选】

/* x轴偏移 | y轴偏移 | 模糊半径 | 颜色 */ text-shadow: 1px 1px 2px black;

9.垂直对齐方式

1.vertical-align 属性

- `vertical-align`是用来设置内联元素对齐方式的，针对的并不是自身的文字

- 常用关键字值：

  - `vertical-align: middle;`

  - `vertical-align: top;`

  - `vertical-align: bottom;`

  - `vertical-align: baseline;`img 的默认对齐值为基线对齐

2. 文本元素基线

- 针对img元素vertical-align: baseline; /*不写就是默认值*/

- 文字的基线不同的文字会有不同的展现