Font（字体）属性
CSS Font（字体）属性用于定义字体系列、大小、粗细、和文字样式等。
font-family（字体系列）
CSS使用font-family属性定义文本的字体系列。
- 各个字体之间必须使用英文逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示
- 最常见的几个字体：body{font-family: ‘Microsoft YaHei‘, tahoma, Arial, ‘Hiragino Sans GB‘}
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体属性之字体系列</title>
<style>
h2 {
font-family: ‘微软雅黑‘;
}
p {
/* font-family: ‘Microsoft YaHei‘, Arial, Helvetica, sans-serif; */
font-family: ‘Times New Roman‘, Times, serif;
}
</style>
</head>
<body>
<h2>pure3417的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
</body>
</html>
font-size（字体大小）
CSS使用font-size属性定义字体大小
- px（像素）大小是我们网页中最常使用的单位
- 谷歌浏览器默认文字大小为16px
- 不同的浏览器可能默认显示的自豪大小不一致，气门尽量给一个明确的大小，不要默认大小
- 可以给body指定整个页面文字的dax
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体属性之字体大小</title>
<style>
body {
font-size: 16px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<h2>pure3417的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
</body>
</html>
font-weight（字体粗细）
CSS使用font-weight属性设置文本字体的粗细。
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bodl | 定义粗体（加粗的） |
| 1000~900 | 400 = normal，700 = bold。注意这个数字后面不跟单位 |
- 实际开发中，我们更喜欢用数字表示粗细
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体属性之字体大小</title>
<style>
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<h2>pure3417的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
</body>
</html>
font-style（字体风格）
CSS使用font-style属性设置文本的风格。
| 属性值 | 作用 |
|---|---|
| normal | 默认值 |
| italic | 斜体 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体属性之文字样式(风格)</title>
<style>
p {
font-style: italic;
}
em {
/* 让倾斜的字体不倾斜 就是赶紧脉动回来 */
font-style: normal;
}
</style>
</head>
<body>
<p>同学,上课时候的你</p>
<em>下课时候的你</em>
</body>
</html>
复合样式
字体属性可以把以上文字样式综合来写，这样可以更节约代码。
- 使用font属性时，必须按照上面语法格式总的顺序书写，不能更换顺序，并且各个属性之间以空格隔开。
- 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family，否则font属性将不起作用。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体属性之复合属性</title>
<style>
/* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: ‘Microsoft yahei‘; */
/* 复合属性: 简写的方式 节约代码 */
/* font: font-style font-weight font-size/line-height font-family; */
/* font: italic 700 16px ‘Microsoft yahei‘; */
font: 20px ‘黑体‘;
}
</style>
</head>
<body>
<div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>
Text（文本）属性
color（文本颜色）
color属性用于定义文本的颜色
| 属性 | 属性值 |
|---|---|
| 预定义颜色 | red，green，blue ... |
| 十六进制 | #FF0000，#FF6600 ... |
| RGB代码 | rgb(255,0,0) 或rgb(100%,0%,0%) |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观属性之颜色</title>
<style>
div {
/* color: deeppink; */
/* color: #cc00ff; */
color: rgb(255, 0, 255);
}
</style>
</head>
<body>
<div>听说点关注的人，都是帅哥美女/div>
</body>
</html>
text-align（文本对齐）
text-align属性用于设置元素内文本内容的水平对齐方式。
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观之文字对齐</title>
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
</style>
</head>
<body>
<h1>我在那</h1>
</body>
</html>
text-decortion（文本装饰）
text-decortion属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等.
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线 |
| underline | 下划线 |
| overline | 上划线 |
| line-throgh | 删除线 |
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS文本外观之装饰文本</title>
<style>
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div>粉红色的回忆</div>
<a href="#">粉红色的回忆</a>
</body>
</html>
text-indent（文本缩进）
text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进。
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
em是一个相对单位，就是当前元素（fone-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观之文本缩进</title>
<style>
p {
font-size: 24px;
/* 文本的第一行首行缩进 多少距离 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>
line-height（行间距）
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观之行间距</title>
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
</head>
<body>
<div>中国人</div>
<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>