字体样式：直接应用于字体的属性，一般是指 font 属性以及与 font 相关的 CSS 属性。例如设置字体大小、粗细等内容。
font-family 属性 （字体）
1 设置一个字体名或字体族名
font-family 属性的值可以只设置一个字体名或字体族名这种方式。
而 font-family 属性的值也可以划分为 2 种：
-
字体族的名字。例如 Times 和 Helvetica 都是字体族名。
-
字体族名必须是有效的。具体可以划分成如下几种情况：
-
- 如果字体族名是一个或多个合法标识串构成的话，是可以没有引号的。
- 如果字体族名是一个或多个非合法标识串构成的话，是需要使用引号的。
- 在没有带引号的字体族名的开头是不能使用标点符号字符和数字字符的。
-
通用字体族名称，这是一种备选机制。 通用字体族名是用来在指定的字体不可用时给出较好的字体。通用字体族名都是关键字，所以不可以加引号。通用字体族名由如下几种：
- serif：带衬线字体，笔画结尾有特殊的装饰线或衬线。
- sans-serif：无衬线字体，即笔画结尾是平滑的字体。
- monospace：等宽字体，即字体中每个字宽度相同。
- cursive：草书字体。这种字体有的有连笔，有的还有特殊的斜体效果。
- fantasy：主要是那些具有特殊艺术效果的字体。
说明：并不推荐只为 font-family 属性设置一个值。因为这样的话，浏览器运行 HTML 页面时很可能找不到这种字体或字体族，从而导致字体不能按照预期的效果进行展示。
2. 设置多个字体名或字体族名
font-family 属性的值除了可以设置一个值之外，还可以同时设置多个字体名或字体族名。在开发中也比较推荐这种方式。
为 font-family 属性设置多个值时，值之间需要使用逗号进行分隔。浏览器会选择列表中第一个该计算机上有安装的字体。
font-size 属性 （字体大小）
font-size 属性的值可以通过如下 4 种方式进行设置：
- 绝对大小值：
xx-small、x-small、small、medium、large、x-large和xx-large等值。 这一系列的绝对大小关键字是相对于用户的默认字体大小（medium）定义的。 - 相对大小值：
larger和smaller两个值。 该相对大小值是相对于父级元素的字体大小为参考，使用与绝对大小关键字的相近缩放比率。 长度值：px、em、rem或ex等值。 - 当大小值为
em或ex值时，值一旦改变可能会影响其他元素的字体大小。 - 百分比值：该值是相对于父级元素的字体大小的百分比。
关于标题元素在开发中的使用时需要注意如下要点：
- 建议最好使用用户默认字体大小的相对大小，避免使用除了
em或ex的绝对大小单位。 - 如果一定要使用绝对大小的话，
px是众多单位中最好的选择。
font-weight 属性 （粗细程度）
font-weight 属性的值可以通过如下 3 种方式进行设置：
-
绝对值：
normal和bold两个值。normal与数字值 400 等价，bold与数字值 700 等价。 -
相对值：
lighter和bolder两个值。lighter：比从父元素继承来的值更细（处在字体可行的粗细值范围内）。bolder：比从父元素继承来的值更粗 （处在字体可行的粗细值范围内）。
-
数字值：介于 100 ~ 900 之间的值。
注意：一些字体只提供 normal 和 bold 两种值。
font-style 属性（设置斜体）
CSS font-style 属性用来设置 font-family 字体下的 italic 或 oblique 样式。
注意：不是所有的字体都有确切的 oblique 和 italic 字形。即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形。
嵌入 Web 字体
@font-face 是 CSS 的 @规则 中的一种，用来为 HTML 页面引入在线字体。通过 @font-face 我们可以自己来准备字体文件，从而可以消除对用户电脑字体的依赖。
提示：@规则是 CSS 中的一个语句，以 @ 符号开始，后面是标识符，并包括直到下一个分号的所有内容。CSS 提供了很多 @规则，不同的规则具有不同的语法以及不同的作用。具体可以参考 MDN 网站的有关@规则文章。
@font-face 具体语法如下所示：
@font-face {
[ font-family: <family-name>; ] ||
[ src: <src>; ] ||
[ unicode-range: <unicode-range>; ] ||
[ font-variant: <font-variant>; ] ||
[ font-feature-settings: <font-feature-settings>; ] ||
[ font-variation-settings: <font-variation-settings>; ] ||
[ font-stretch: <font-stretch>; ] ||
[ font-weight: <font-weight>; ] ||
[ font-style: <font-style>; ]
}
上述语法结构具体内容如下：
- font-family：所指定的字体名字将会被用于 font 或 font-family 属性。
- src：通过
url()函数指定远程字体文件的位置，或者通过local()函数指定用户的本地计算机上的字体。 - font-variant：同 font-variant 属性。
- font-stretch：同 font-stretch 属性。
- font-weight：同 font-weight 属性。
- 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>引入Web字体</title>
<style>
/* 设置引入Web字体 */
@font-face {
font-family: 'Alibaba';
src: url('fonts/Alibaba-PuHuiTi-Regular.ttf');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: benmo;
src: url('fonts/本墨字造醉黑.TTF');
}
/* 某元素设置字体样式 */
p {
font-family: benmo;
}
</style>
</head>
<body>
<p>莫笑沉吟</p>
</body>
</html>
效果：
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
