犹如白皮书般详细的Css文本控制总结
作者：花森
时间：2020年8月11日
认识
一般情况下操作系统会存在于系统中，浏览器会根据你网页设定的字体依次查找，找到匹配到后将展示，不在向后查找，例如你的电脑有宋体存在，在网页就会显示宋体，但其他用户中无次字体，所以造成其他用户使用是不会显示宋体字体。
...
花森导航
文本基础
自定义字体
声明自定义字体名称，如果客户端不存在将下载该字体，使用方式也是通过 font-family 引入。很多字体都是有版权的，商用要注意，我导航也有免费商用的网站。
| 字体 | 格式 |
|---|---|
| .otf | opentype |
| .woff | woff |
| .ttf | truetype |
| .eot | Embedded-opentype |
字重定义
字重指字的粗细定义，取值范围 normal | bold | bolder | lighter | 100 ~900。400对应 normal,700对应 bold ，一般情况下使用 bold 或 normal 较多。
font-weight: normal;
文本字号
字号用于控制字符的显示大小，包括 xx-small | x-small | small | meidum | large | x-large | xx-large。
单位百分数
百分数是子元素相对于父元素的大小，如父元素是20px，子元素设置为 200%即为你元素的两倍大小。
...
huasen
单位em
相当于父元素的大小，若父元素的字体大小为16px，子元素的字体设置为0.75，正常继承下子元素的字体大小为16*0.75=12px。正常情况下1em=16px。
...
huasen.top
文本颜色
1）字符串颜色
可以使用如 red | green 等字符颜色声明
color:red;
2）16进制网页颜色
#开头的6位16进制码能表示的色域更大
color:#ddffde
3）RGB
红绿蓝3个三位数数字表示
color:rgb(38, 149, 162);
4）RGBA透明颜色
重点是A的值是0-1是透明到不透明
color:rgba(38, 149, 162,0.2);
行高定义
父元素固定高度后，设置line-height等于父元素的宽高时，行内元素以及文字会垂直居中。
div {
width: 100px;
height: 100px;
background-color: gold;
line-height: 100px;
}
花森
字体倾斜
...
huasenjio
huasenjio
文本样式
大小写转化
通过样式实现小写字母转大写字母
span {
font-variant: small-caps;
}
...
huasen.top
文本线条装饰
为文本添加线条装饰，例如：下划线，斜杠等效果。
a {
text-decoration: none;
}
span.underline {
text-decoration: underline;
}
span.through {
text-decoration: line-through;
}
span.overline {
text-decoration: overline;
}
...
huasen
下划线
删除线
上划线
文本阴影（*）
为文本提供阴影效果，参数顺序分别为：颜色，水平X轴偏移，垂直Y轴偏移，模糊度。
...
huasenjio
空白处理（*）
| 选项 | 说明 |
|---|---|
| pre | 保持字符串原有模样（类似使用 pre 标签） |
| nowrap | 禁止文本换行（打死都不换行） |
| pre-wrap | 保留空白且保留换行符（不常用） |
| pre-line | 空白合并且保留换行符w（不常用） |
文本溢出（*）
文本溢出的前提是元素需要固定的宽度
单行溢出处理
溢出添加 ...，需要将overflow 设置在 text-overflow 前面。
h2 {
width: 100px;
border: solid 1px #ddd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
huasenjio
多行溢出处理（WebKit内核浏览器）
huasenjio.tophuasenjio.tophuasenjio.tophuasenjio.tophuasenjio.top
段落控制
文本缩进
p {
text-indent: 2em;
}
文本对齐
1）水平对齐
h2 {
text-align: center;
}
2）文章内容的段落样式好，能起到先心悦目的作用。
p {
text-indent: 2em;
line-height: 2em;
}
...
脑子还依旧很清晰地记得，我刚转入计算机专业时稚嫩的样子，那时多么想拥有一个自己的笔录，记录着自己的点滴。因为个人比较喜欢打王者荣耀，耽误了很多时间，正如年年岁岁花相似，岁岁年年人不同。只道是不悔梦归处，只恨太匆匆。我的心里很是感慨， 没有退路，让我想起一句话，没有伞的孩子，只能向前奔跑。
垂直对齐
使用 vertical-align 用于定义内容的垂直对齐风格，包括middle | baseline | sub | super 等。
huasenjio
1）顶部与底部对齐
bottom | top 相对于行框底部或顶部对齐
h2>span {
vertical-align: bottom;
font-size: 12px;
}
花森酱huasenjio
2）使用单位对齐
可以使用具体数值设置对齐的位置
h2>span {
vertical-align: -20px;
font-size: 12px;
}
花森酱huasenjio
字符间隔
使用 word-spacing 与 letter-spacing 控制单词与字答间距
h2 {
word-spacing: 2em;
letter-spacing: 3em;
}
花森酱huasenjio
排版模式
| 模式 | 说明 |
|---|---|
| horizontal-tb | 水平方向自上而下的书写方式 |
| vertical-rl | 垂直方向自右而左的书写方式 |
| vertical-lr | 垂直方向内内容从上到下且水平方向从左到右 |
div {
height: 200px;
border: solid 1px #ddd;
writing-mode: vertical-rl;
}
花森酱huasenjio