作者：花森
时间：2020年8月11日
认识
一般情况下操作系统会存在于系统中，浏览器会根据你网页设定的字体依次查找，找到匹配到后将展示，不在向后查找，例如你的电脑有宋体存在，在网页就会显示宋体，但其他用户中无次字体，所以造成其他用户使用是不会显示宋体字体。
<style>
* {
font-family: 'Courier New', Courier, monospace;
}
</style>
...
<div>花森导航</div>
文本基础
自定义字体
声明自定义字体名称，如果客户端不存在将下载该字体，使用方式也是通过 font-family 引入。很多字体都是有版权的，商用要注意，我导航也有免费商用的网站。
| 字体 | 格式 |
|---|---|
| .otf | opentype |
| .woff | woff |
| .ttf | truetype |
| .eot | Embedded-opentype |
<style>
@font-face {
font-family: "自定义字体名";
src: url("./SourceHanSansSC-Light.otf") format("opentype"),
url("./SourceHanSansSC-Heavy.otf") format("opentype");
}
span {
font-family: '自定义字体名';
}
</style>
字重定义
字重指字的粗细定义，取值范围 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%即为你元素的两倍大小。
<style>
article {
font-size: 20px;
}
span {
font-size: 500%;
}
</style>
...
<article>
<span>huasen</span>
</article>
单位em
相当于父元素的大小，若父元素的字体大小为16px，子元素的字体设置为0.75，正常继承下子元素的字体大小为16*0.75=12px。正常情况下1em=16px。
<style>
article {
font-size: 16px;
}
span {
font-size: 0.75em;
}
</style>
...
<article>
<span>huasen.top</span>
</article>
文本颜色
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;
}
<div>
花森
</div>
字体倾斜
<style>
span {
font-style: italic;
}
em {
font-style: normal;
}
</style>
...
<span>huasenjio</span>
<hr>
<em>huasenjio</em>
文本样式
大小写转化
通过样式实现小写字母转大写字母
span {
font-variant: small-caps;
}
...
<span>huasen.top</span>
<style>
h2 {
/* 首字母大小 */
text-transform: capitalize;
/* 全部大小 */
text-transform: uppercase;
/* 全部小写 */
text-transform: lowercase;
}
</style>
文本线条装饰
为文本添加线条装饰，例如：下划线，斜杠等效果。
a {
text-decoration: none;
}
span.underline {
text-decoration: underline;
}
span.through {
text-decoration: line-through;
}
span.overline {
text-decoration: overline;
}
...
<a href="">huasen</a>
<hr>
<span class="underline">下划线</span>
<hr>
<span class="through">删除线</span>
<hr>
<span class="overline">上划线</span>
文本阴影（*）
为文本提供阴影效果，参数顺序分别为：颜色，水平X轴偏移，垂直Y轴偏移，模糊度。
<style>
h2 {
text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
}
</style>
...
<h2>huasenjio</h2>
空白处理（*）
| 选项 | 说明 |
|---|---|
| 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;
}
<h2>huasenjio</h2>
多行溢出处理（WebKit内核浏览器）
<style>
h2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<!--缩小浏览器窗口查看效果-->
<h2>huasenjio.tophuasenjio.tophuasenjio.tophuasenjio.tophuasenjio.top</h2>
段落控制
文本缩进
p {
text-indent: 2em;
}
文本对齐
1）水平对齐
h2 {
text-align: center;
}
2）文章内容的段落样式好，能起到先心悦目的作用。
p {
text-indent: 2em;
line-height: 2em;
}
...
<p>
脑子还依旧很清晰地记得，我刚转入计算机专业时稚嫩的样子，那时多么想拥有一个自己的笔录，记录着自己的点滴。因为个人比较喜欢打王者荣耀，耽误了很多时间，正如年年岁岁花相似，岁岁年年人不同。只道是不悔梦归处，只恨太匆匆。我的心里很是感慨， 没有退路，让我想起一句话，没有伞的孩子，只能向前奔跑。
</p>
垂直对齐
使用 vertical-align 用于定义内容的垂直对齐风格，包括middle | baseline | sub | super 等。
<style>
img {
height: 50px;
width: 50px;
vertical-align: middle;
}
</style>
<p>
<img src="houdunren.jpg" />
huasenjio
</p>
1）顶部与底部对齐
bottom | top 相对于行框底部或顶部对齐
h2>span {
vertical-align: bottom;
font-size: 12px;
}
<h2>花森酱<span>huasenjio</span></h2>
2）使用单位对齐
可以使用具体数值设置对齐的位置
h2>span {
vertical-align: -20px;
font-size: 12px;
}
<h2>花森酱<span>huasenjio</span></h2>
字符间隔
使用 word-spacing 与 letter-spacing 控制单词与字答间距
h2 {
word-spacing: 2em;
letter-spacing: 3em;
}
<h2>花森酱<span>huasenjio</span></h2>
排版模式
| 模式 | 说明 |
|---|---|
| horizontal-tb | 水平方向自上而下的书写方式 |
| vertical-rl | 垂直方向自右而左的书写方式 |
| vertical-lr | 垂直方向内内容从上到下且水平方向从左到右 |
div {
height: 200px;
border: solid 1px #ddd;
writing-mode: vertical-rl;
}
<h2>花森酱<span>huasenjio</span></h2>