1. 字体大小
谷歌浏览器默认的字体大小是 16 px，这里需要注意，单位必须设置，否则无效。
写法: font-size : 数字 px ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
font-size: 25px;
}
</style>
</head>
<body>
<p>谷歌浏览器默认字体大小</p>
<div>字体大小</div>
</body>
</html>
2. 字体粗细
字体粗细有两种取值方式：关键字、纯数字
关键字：正常（normal）；加粗（bold）
纯数字：100 - 900 的整百数，实际开发中最常用的有两种：正常（400）；加粗（700），可根据自己的喜好选择使用。但不是所有的字体都提供了九种粗细，因此其中部分取值页面没有任何变化。
写法:font-weight : normal ; 或 font-weight : 400 ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
font-weight: bold;
}
div {
font-weight: 700;
}
</style>
</head>
<body>
<p>关键字加粗</p>
<div>纯数字加粗</div>
</body>
</html>
3. 字体样式
最常用的字体样式是 normal（正常，默认值）、italic（倾斜）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<div>字体样式：倾斜</div>
<em>字体样式：正常</em>
</body>
</html>
4. 字体系列
常见字体：无衬线字体（sans-serif）、衬线字体（serif）、等宽字体（monospance）等，网页中大多采用无衬线字体，如黑体。
字体系列不需要刻意记忆具体有哪些字体，只要记住写法就行，用到时可查阅相关文档。
字体系列的属性名是：font-family
常见取值：集体字体1, 具体字体2, ... , 字体系列
- 具体字体：微软雅黑、（Windows 系统默认字体）、黑体、宋体等
- 字体系列：sans-serif 等
字体系列按照从左往右的顺序查找，如果电脑中没有安装该字体，则显示下一个字体；如果都不支持，此时就会根据操作系统显示最后的字体系列的默认字体。
需要注意的是，开发网页时，尽可能地选择系统常见的、自带的字体，保证不同用户浏览网页时都能正确显示，提升用户的体验感。
最后写法上需要注意的是，如果字体名称中含有多个单词，尽量使用引号包裹，如 “Microsoft YaHei”,最后一项字体系列不需要引号包裹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
font-family: 黑体, 'Times New Roman', 宋体, sans-serif;
}
</style>
</head>
<body>
<div>字体系列：如果用户系统没有安装黑体，则依次显示后面安装的字体；如果都没有，则显示非衬线字体系列的默认字体</div>
</body>
</html>
