1.字体系列
CSS使用font-family属性定义文本的字体系列
body{font-family:"思源黑体","Microsoft YaHei";}
建议：使用英文写字体的属性值，尽量使用系统默认自带字体，保证在任何用户的浏览器都可以显示
微软雅黑-Microsoft YaHei
说明：
font-family可以同时赋多个属性值的原因是：如果用户电脑未安装第一种字体，就依次类推用其他字体进行渲染。如果都没有，就使用浏览器默认字体。
2.字体大小
谷歌浏览器默认16px(像素)，尽量给设置大小，不要默认大小。
body{font-size: 16px;}
给body设置时，会发现标题标签比较特殊，所以需要给标题标签进行单独设置
<!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>
body{font-size: 16px;font-family:'Times New Roman', Times, serif;}
</style>
</head>
<body>
<h2>前端学习</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</body>
</html>
<!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>
body{font-size: 16px;font-family:'Times New Roman', Times, serif;}h2{font-size: 16px;}
</style>
</head>
<body>
<h2>前端学习</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</body>
</html>
3.字体粗细
body{font-weight: bold;}
属性值：
属性值含义normal正常字体，默认.相当于number=400bold粗体，相当于number=700,与b标签粗细一致bolder特粗体lighter细体number直接设置字体大小，100,200…900，后边没有单位
<!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>
body{font-weight: 400;}h2{font-weight: 400;}
</style>
</head>
<body>
<h2>前端学习</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</body>
</html>
4.文字样式
body{font-style:}
属性值：
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>
body{font-weight: 400;font-style: italic;}h2{font-weight: 400;}
</style>
</head>
<body>
<h2>前端学习</h2>
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</body>
</html>
很少给文字加斜体，但可以使用font-style将（em\i）标签改为不倾斜（font-style:normal）
5.字体的复合属性
需求：将文字的样式设置为斜体，加粗，大小为16px,样式为微软雅黑
使用符合属性之前，代码这样：
<!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: 16px;font-weight: bold;font-family:'Microsoft yahei';font-style: italic;}
</style>
</head>
<body>
<div>允许一切发生，倒霉蛋儿</div>
</body>
</html>
使用复合属性：
顺序和格式：必须按照以下书写顺序，可以省略，但font-size和font-family必须保留
font:font-style,font-weight,font-size/line-heght,font-family
<!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: 16px;font-weight: bold;font-family:'Microsoft yahei';font-style: italic;}.words{font: italic bold 16px 'Microsoft yahei'}
</style>
</head>
<body>
<div>允许一切发生，倒霉蛋儿</div>
<div class="words">允许一切发生，倒霉蛋儿</div>
</body>
</html>
本文转载自: https://blog.csdn.net/Ambition_ZM/article/details/128003763
版权归原作者 MY Daisy 所有， 如有侵权，请联系我们删除。
版权归原作者 MY Daisy 所有， 如有侵权，请联系我们删除。