1. 字体属性
字体属性定义字体系列、大小、粗细和文本样式（粗细等）
1.1 字体系列
font-family
-
用法：
p { font-family: '微软雅黑'; }其中不建议写中文（不兼容），建议写英文："Microsoft YaHei"
-
可以写多个字体：
- 多个字体用逗号进行隔开
- 浏览器解析时，从头开始预览看当前系统是否有该字体，有该字体则显示，否则继续向后搜索，直到搜索不到，便使用系统自带字体。
- 写多个字体兼容性比较好
尽量使用系统默认自带字体，保证任何用户的浏览器都能正确显示
-
一般情况下，如果有空格隔开的多个组成的字体，加引号。
font-family: 'Mirosoft Yahei',arial Chrome默认字体为：Mirosoft YaHei
-
自定义字体
@font-face { font-family: cheng; // 自定义字体名称 src: local("/js/font/AlexBrush-Refular.ttf");// url("AlexBrush-Refular.ttf") format("truetype"); } p { color: red; font-family: cheng; // 使用自定义字体 }- css3新属性
-
Firefox Chrome Safari Opera支持.ttf（True Type）和.otf(OpenType) - IE9+仅支持
.eot(Embedded OpenType) -
Font Squirrel免费字体，但是可以将其他字体转换为.eot字体
1.2 字体大小
font-size
-
单位：
单位 描述 字符 xx-small/x-small/small/medium/large/x-large/xx-large 像素 px百分数 %相对于父元素的字号的几倍，父元素12px，子元素200%, 表示子元素为父元素两倍大 em 1em = 100% 等同于百分比 设置宽 -
experice:
- 不同浏览器可能默认显示的字号大小不一致，因此最好给个明确的大小
- 谷歌浏览器默认的文字大小为16px
- 可以通过给body指定整个页面文字的大小，来对整个页面的文字大小进行统一化
- 通过body设定指定的文字大小，对标题不起作用，标题文字大小需要单独设置
1.3 字体粗细
font-weight
-
对应关系
属性值名称 属性值number 解释 normal 400 正常字体 bold 700 粗体 bolder lighter（更细的一种字体） 取值范围 100 - 900
实际开发中使用number设定
-
应用：
- 对标题进行取消加粗：font-weight: 400;
- 对加粗标签进行取消加粗
- 对没有加粗的标签进行加粗操作
1.4 文字样式（斜体）
font-style
-
对应关系
属性值 作用 normal 正常字体 italic 斜体 -
应用场景
- 将斜体的字体不斜体：比如：em，i
1.5 字体颜色
color
-
可选值
属性值类型 预定义字符red, blue, 等 十六进制的6位字符： #0000ffGRB颜色 rgb(red,green,blue)值都是0 ~ 255之间GRBA透明颜色， rgba(red,green,blue,0~1)，0~1表示透明到不透明，小数可以简写为.x
1.6 行高（行间距）
line-height设置行间的距离（行高）。可以控制文字行与行之间的距离
-
单位：
单位 作用 px 百分制 相对于当前字体大小 font-size的百分比em 相对于当前字体大小 font-size的百分比 <img src="E:\前端\css\图片\line-height.png" style="zoom:50%;" />
其中上间距和下间距一定是相等且为line-height减去文本高度均分之后的值
应用：由于文本一般从盒子左部开始排列，因此只要行高等于盒子高度，则居中于盒子，如果小于盒子高度，则在盒子中上部，如果大于盒子高度，则在盒子中下部。
1.7 文字复合写法
- font: font-style font-weight font-size[/line-height] font-family
-
font-style font-weight可以互换顺序，但是只能在大小和字体系列之前设置 - 不需要的可以不设置，但是font-size和font-family不能省略，否则不起作用
2. 文本样式
2.1 大小写转换
-
font-variant用于小写转为大写属性值
属性值 备注 small-caps 只有小写字母转换为大写，原来大写的字母不变 all-small-caps 所有的字母均转换为大写 注：此方式不同于一般的小写转换为大写会发生字体变大的情况，而此方式不会产生这种情况，因此以上两个属性值在需要转换的字母中存在大写字母，转换之后的效果是不一样的。
-
text-transform用于大小写互相转换属性值
属性值 备注 capitalize 首字母大写 uppercase 全部大写 lowercase 全部小写 注：不同于
font-variant，此方式会造成字体的大小变化
2.2 文本线条
-
通过
text-decoration设置文本的线条形式属性值
属性值 备注 overline 在文本上方 underline 在文本下方 line-through 在文本中央 none 没有线（一般使用该属性去除超链接默认下划线）
2.3 文本阴影
通过
text-shadow-
语法：
color offset-x offset-y blur-radius
或者
offset-x offset-y blur-radius color
- color: 阴影的颜色值
- offset-x/offset-y：水平偏移量/垂直偏移量，以文字为中心的偏移量，默认右为正，如果为负数则位于文字左边
- blur-radius：模糊半径，值越大，阴影越淡。
至少要写两个数值
可以设置多个阴影，多个阴影参数之间采用逗号连接。
2.4 文本空白处理
使用
white-space控制文本空白显示，也即对于空白字符想要原样输出/不输出的控制-
语法：
选项 说明 pre 保留文字中的所有空白，类似于使用pre标签，包括换行符 nowrap 禁止文本换行 pre-wrap 保留空白保留换行符（和使用pre效果一样） pre-line 空白合并，保留换行（和不使用white-sapce效果一样）
2.5 文本溢出处理
-
文本溢出断行处理
overflow-wrap当一个不能被分割的字符串太长而不能填充其包裹盒子时，为防止其溢出，浏览器是否允许这样的单词中断换行。
-
属性值
属性值 说明 normal 只能在正常单词断点处中断，也即两个单词空白处 break-word 如果行内没有多余空间，则当前正常的单词被强制拆分换行显示 word-wrap原本是微软的一个私有属性，css3被重命名为overflow-wrap。稳定的Chrome, Opera浏览器版本支持这种新语法。-
类比：
word-break，指定怎么在单词内断行-
属性值
-
属性值 说明 normal 使用默认的断行规则 break-all 对于non-CJK(CJK表示中文日文韩文)，可在任意字符间断行 keep-all CJK不断行，而non-CJK表现为normal break-word 效果等价于 break-word:normal 和 overflow-wrap:anywhere之和
-
-
与
overflow-wrap:break-word的区别oveflow-wrap:break-word，只有当一行中单词容不下才断行，而word-break:break-word为预判可能溢出的地方找到确切的位置进行断行处理。
-
-
文本溢出：多余文本内容显示
...-
先来看一下
overflow-x/overflow-y以及overflow的用法overflow-x： 当一个块级元素的内容在水平方向发生溢出的时候，对于溢出内容的处理。属性值 说明 visible 内容不会截断，可以显示在内容盒子外（默认值） hidden 内容会被截断，且不会显示滚动条 scroll 浏览器桌面总是显示滚动条，避免消失/显示照成元素尺寸不一。但是打印机仍然会打印溢出的内容。 auto 根据情况自适应，如果溢出则显示滚动条，否则不显示 overflow-y类似，只是方向变为在垂直方向溢出时的处理方式。overflow为以上两者属性的简写形式，简写类似于：/* On Firefox 61 and 62, this is the same as */ overflow: overflow-y overflow-x; /* But on Firefox 63 and later, it will be */ overflow: overflow-x overflow-y;注：
- 不同于
overflow-wrap和word-break对单词断行处理，而此处为对所有溢出内容的处理。 -
overflow-x/overflow-y此功能尚在开发，有很严重的兼容性问题，因此可使用overflow避免。
- 不同于
接着来探讨一下：
text-overflowtext-overflow：用于处理当文本溢出时，向用户显示的溢出信号。此属性支队在块级元素溢出的内容有效，且必须要与块级元素内联方向一致（内容在盒子下方溢出，此方式无效），因此文本溢出情况有：
- 某种原因无法换行，设置了
white-space:nowrap - 一个单词太长不能安置
注意：此属性不会强制
溢出事件发生，也即除非处理了溢出文本，否则不会强制对其按溢出处理。因此需要搭配overflow:hidden才有效。属性值 说明 clip 在内容区域的极限处截断文本，默认值，其余部分用 ''代替ellipsis 采用 ...替代，若盒子容不下省略号，则省略号也会被截断string 基本上都还没有支持自定义字符串 因此处理文本溢出多余部分用
...显示方式：div > p { // 事件源 white-space: nowrap; // 溢出事件发生 overflow: hidden; // 溢出文本显示处理 text-overflow: ellipsis; }注：此方式只只正对于块级元素内且与块级元素内联方向一致的元素内容设置有效。
-
-
表格文本溢出
表格文本溢出控制需要为 table 标签定义
table-layout: fixed;css样式，表示列宽是由表格和单元格宽度定义。table { table-layout: fixed; } table tbody tr td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -
多行内容溢出显示
...-webkit-line-clamp：将快容器的内容限制为指定的行数，此属性在webkit实现，但是仍然有一些问题，可以用line-clamp代替。此属性的使用必须在
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
时才有效
属性值 说明 none 内容没有限制 integer 这个值表明内容显示了多少行之后会被限制.必须大于0. 因此多行内容溢出显示：
div > p { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;// 显示两行之后会被限制 }
3 段落控制
3.1 文本对齐
水平对齐
text-align控制行内内容相对于父块级元素的对齐方式-
属性值
属性值 说明 start 如果文本为从左到右，则类似于 left，否则类似于rightend 如果文本从左到右，则类似于 right，否则类似于leftleft 行内内容向左侧边对齐，默认值 center 行内内容居中 right 行内内容向右侧边对齐 justify 文字向两侧对齐，最后一行无效 justify-all 文字向两侧对齐，强制包括最后一项生效 垂直对齐
vertical-align用于指定行内元素和表格单元格元素垂直对齐方向，必须是行内元素p标签元素都不行-
属性值
相对于父元素的垂直对齐方式
属性值 说明 sub 元素基线与父元素下标基线一致（没有基线的元素，使用外边距的下边缘替代。） 相对于整行垂直对齐方式常用
属性值 说明 top 元素以及其后代元素的顶部与整行顶部对齐 bottom 元素以及其后代元素的顶部与整行底部对齐 也可以使用具体数值表示
3.2 文本缩进
用来指定文本的首行缩进
text-indent
-
属性值
单位 说明 px 固定单位，一般不使用（不响应式） em 相对当前元素字体大小的几倍 % 类似于em 注：可正可负，如果为负，则表明向左缩进一定大小的距离。
3.3 字符间隔
使用letter-spacing和word-spacing控制字符的间隔，其中前一项针对于CJK，后一项针对于non-CJK
3.4 文本排版模式
使用wiriting-mode进行设置
| 属性值 | 说明 |
|---|---|
| horizontal-tb | 水平从左到右（一般状态），没有水平从右到左 |
| vertical-lr | 垂直从左到右 |
| vertical-rl | 垂直从右到左 |
