今天讲下HTML中，CSS样式里的字体属性。CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)。
字体系列:
CSS中使用font-family 属性定义文本的字体系列。语法如下:
p {
font-family: "微软雅黑";
}
<div font-family: Arial,"Microsoft Yahei","微软雅黑";></div>
我们来看个实例:
可以看到将标题进行了字体设置，来看下具体的代码:
<!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>CSS字体属性之字体系列</title>
<!--对h2修改下字体-->
<style>
h2 {
font-family: "宋体";
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有，把酒问青天</p>
<p>不知天上宫阙，今夕是何年</p>
<p>我欲乘风归去，又恐琼楼玉宇</p>
<p>高处不胜寒，起舞弄清影，何似在人间。</p>
</body>
</html>
其中
<style>
h2 {
font-family: "宋体";
}
</style>
就是设置字体的地方
尝试修改为另外一种字体，如微软雅黑，让我们看看效果
具体对应的代码为:
<style>
h2 {
font-family: "微软雅黑";
}
</style>
还可以用两个字体，效果如下:
对应的代码为:
<!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>CSS字体属性之字体系列</title>
<!--对h2修改下字体-->
<style>
h2 {
font-family: "微软雅黑";
}
p {
font-family: "宋体";
}
</style>
</head>
<body>
<h2>明月几时有</h2>
<p>明月几时有，把酒问青天</p>
<p>不知天上宫阙，今夕是何年</p>
<p>我欲乘风归去，又恐琼楼玉宇</p>
<p>高处不胜寒，起舞弄清影，何似在人间。</p>
</body>
</html>
建议不要直接使用中文，最好使用英文，微软雅黑对应的是 Microsoft YaHei
我们替换后试下:
字体没变，还是一样，但是代码变了
<style>
h2 {
font-family: "Microsoft YaHei";
}
p {
font-family: "宋体";
}
</style>
不仅可以写一个字体，还可以写多个字体，之间用空格隔开。各种字体之间必须使用英文的逗号符号。一般情况下，如果有空格隔开的多个单词组成的字体，需要加引号。尽量使用系统自带的默认字体，保证在任何用户的浏览器中能够正常显示。
写多个字体的好处就是:
当浏览器运行并调用字体代码时，会按照顺序先查看第一个字体，如果系统中没有，会自动调用第二个字体，直到找到匹配的字体。
,
