这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战。
温故而知新，可以为师矣。
字体样式
标题同时给出了实例链接，具体可查询MDN文档。
font-family
- 字体列表最后写上通用字体族（即图片所示）
- 英文字体放在中文字体前面
Web Fonts
/* 引入Web Fonts */
@font-face {
font-family: "Megrim";
src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
}
h1 {
font-family: Megrim, Cursive;
}
font-size
通常使用px，em，或者百分比，其中em和百分比都是相对于父元素字体大小。
<section>
<h2>A web font example</h2>
<p class="note">Notes: Web fonts ...</p>
<p>With this in mind, let's build...</p>
</section>
<style>
section {
font-size: 20px;
}
section h1 {
font-size: 2em; /* 20px*2=40px */
}
section .note {
font-size: 80%; /* 20px*0.8=16px */
color: orange;
}
</style>
font-style
可以选择正常字体或者斜体，
oblique是常规字形的倾斜版本，在没有可用斜体时替代italic。
div {
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;
}
font-weight
字重，即字体粗细，9个档次，100~900。
line-height
基于字体的baseline，当属性值为无单位数字时，等于该数字乘以该元素字体大小。
<section>
<h1>Font families recap</h1>
<p>As we looked at in fundamental text and font styling.</p>
</section>
<style>
h1 {
font-size: 30px;
line-height: 45px;
}
p {
font-size: 20px;
line-height: 3; /* 20px*3=60px */
}
</style>
以上属性可以有一个统一简洁的定义方式，即：
/* font: style weight size/height family */
h1 {
font: bold 14px/1.7 Helvetica, sans-serif;
}
/* 简略版 */
p {
font: 14px serif;
}
text-align
文字对齐方式，相对于它的块父元素，其中
justify为两端对齐。
div {
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
}
全部属性及对齐情况：
spacing
letter-spacing：字母间距word-spacing：单词间距
text-indent
一个块元素首行文本内容之前的缩进量。
text-decoration
设置文本的修饰线外观（下划线、上划线、删除线），都可以顾名思义
- none
- underline
- overline
- line-through
white-space
- nowrap 永远不换行
- pre 空格换行全部保留
- pre-wrap 一行内显示不下会换行
- pre-line 保留换行
调试CSS
- 右键点击页面，选择检查。
- 使用快捷键
- Ctrl+Shift+I（Windows）
- Cmd+Opt+I（Mac）
