CSS（三）：Font（字体）属性
CSS Font（字体）属性用于定义字体系列、大小、粗细、和文字样式等。
font-family（字体系列）
CSS使用font-family属性定义文本的字体系列。
基本语法
p {
font-family: '微软雅黑';
}
div {
/* 如果写了多个字体会按照从左到右的顺序在浏览器中查找字体，如果没有第一种字体，会按照第二种字体显示，以此类推，如果都没有，会显示系统默认的字体 */
font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}
- 各个字体之间必须使用英文逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示
- 最常见的几个字体：
body{font-family: 'Microsoft YaHei', tahoma, Arial, 'Hiragino Sans GB'} - 一般情况下，指定
body标签的字体，因为页面内容一般在body标签内
示例代码
<!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属性定义字体大小
基本语法
p {
font-size: 20px;
}
px（像素）大小是我们网页中最常使用的单位- 谷歌浏览器默认文字大小为16px
- 不同的浏览器可能默认显示的字体大小不一致，我们尽量给一个明确的大小，不要默认大小
- 可以给
body指定整个页面文字的大小
示例代码
<!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属性设置文本字体的粗细。
基本语法
p {
font-weight: 属性值;
}
| 常用属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bodl | 定义粗体（加粗的） |
| number(100~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属性设置文本的风格。
基本语法
p {
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>下课时候的你</em>
</body>
</html>
复合样式
字体属性可以把以上文字样式综合来写，这样可以更节约代码。
基本语法
body {
font: font-style font-weight font-size/line-height font-family;
}
- 使用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>
总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 常用的单位是px（像素），单位一定要跟上 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 加粗是700或者bold 不加粗是normal或者400 数字不要跟单位 |
| font-style | 字体样式 | 倾斜是italic 不倾斜是normal 工作中常用normal |
| font | 复合样式（字体连写） | 字体连写有顺序，不能随意换位置 其中字体，字号必须有 |
