目录
前言：
在网页中字体是重要的组成部分，使用好字体可以让网页更加美观，在CSS中提供了一系列用来设置文本样式的属性，如更改字体，控制字体大小和粗细等等。如下：
font-family：用来设置字体的。
font-style：用来设置字体风格，比如斜体。
font-weight：用来设置字体粗细。
font-size：用来设置字体尺寸。
font-variant：可以将小写字母转换为小型大写字母。
font-stretch：对字体进行伸缩变形(使用较小，并且主流的浏览器都不支持，就不做讲解了)。
font：字体所有属性的缩写，可以在一个声明里面设置多个字体属性。
1.font-family：
font-family属性是用来设置元素里面的字体，因为字体种类成千上万，有些还要钱，因为我们电脑不可能有所有的字体，所以为了保证我们设置的字体能够正常显示，可以通过font-family属性定义一个由若干字体组成的列表，字体名称之间可以使用逗号,分隔，浏览器会先使用列表里第一个字体，如果不支持就下一个，一直到所有都尝试完之后，如果都不是就使用浏览器默认的字体。font-family的值如下：
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.typeface {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}
</style>
</head>
<body>
<h1 class="typeface">这设置了font-family属性</h1>
</body>
</html>在设置字体或者字体族的时候如果其中有多个空格或者多个单词，就需要使用引号将其包裹，如：'Times New Roman'如果元素是在style属性里面使用就必须使用单引号。
代码的运行结果如下所示：
2.font-style：
font-style属性可以用来设置字体的样式，斜体，倾斜等等，如下是其的值：
如下是代码的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-style: oblique;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
.inherit {
font-style: inherit;
}
</style>
</head>
<body>
只是一段无意义的文本
<p class="normal">normal：正常的字体。</p>
<p class="italic">italic：显示一个斜体的字体。</p>
<p class="oblique">oblique：显示一个倾斜的字体。</p>
<p class="inherit">inherit：从父元素继承字体的设置。</p>
</body>
</html>代码的运行结果如下：
3.font-weight：
在CSS中font-weight可以设置字体的粗细，其值如下：
font-weight代码示例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.weight-100 {
font-weight: 100;
}
.weight-300 {
font-weight: 300;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<p class="weight-100">font-weight：100.</p>
<p class="weight-300">font-weight：300.</p>
<p class="normal">font-weight：normal.</p>
<p class="bold">font-weight：bold.</p>
<p class="bolder">font-weight：bolder.</p>
</body>
</html>上述代码的运行结果如下所示：
4.font-size：
font-size属性是用来设置字体的大小(字号)的，其值如下：
font-size属性的示例代码如下：
5.font-variant：
font-variant属性可以将文本里面的小写英文字母转换为小型大写字母(转换之前的字母和转换之后的字母大小基本差不多，所以称其为小型大写字母)，其值如下：
font-variant属性的示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.normal {
font-variant: normal;
}
.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>
</html>上述代码的运行结果如下所示：
6.font：
font属性和之前的background功能类似，通过font属性可以同时设置多个字体的属性，不同的是，使用font需要遵循如下顺序：
使用font时需要注意：
- 使用font属性必须按照上述顺序，而且font-size和font-family这两个属性不可以忽略。
- font属性里的每个参数只可以设置一个值，除font-size和font-family属性外，被忽略的属性将变成各自的默认值。
- 如要定义line-height属性，就需要使用斜线/将font-size和line-height属性隔开。
如下是font的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.font {
font: oblique 100 12px/30px arial, sans-serif;
}
</style>
</head>
<body>
<p class="font">这是一个font属性的设置。</p>
</body>
</html>上述代码的运行结果如下：