字体粗细

通过 font-weight 可以设置字体的粗细，它接收以下的值。

数字：一个介于 1 到 1000 之间的数字，查看 MDN 的粗细值名称和数值对应关系。
normal：默认值，正常粗细，与 400 相等。
bold：加粗，与700相等。
lighter：比继承的值稍细。
bolder：比继承的值稍粗。

$$tip

设置的字体粗细是否起效，要看系统中的字体是否提供了对应的粗细字体。

$$tip

有关 lighter 与 bolder 的相对变化可以查看 MDN 的相对粗细值的解析。

字体样式

font-style 属性可以设置显示的字体样式，有以下取值：

normal：默认值，常规字体。
italic：斜体，如果字体没有提供 italic 字体，则采用 oblique 字体，如果也没有则浏览器自动合成。
oblique：倾斜体，如果字体没有提供 oblique 字体，则采用 italic 字体，如果也没有则浏览器自动合成。

$$tip

有关 font-style 斜体的选择规则可以参考 w3c 的字体样式官方说明。

字体族名

通过属性 font-family 可以让我们指定显示文本的字体族名，属性值接受一个字体族名列表，用逗号分隔。显示文本时会依次顺序匹配系统中的字体族名，直接找到对应的字体。

$$tip

如果电脑中没有安装对应的字体，那么将不能成功应用。

$$tip

Windows 下的字体文件被存放在 C:\Windows\Fonts 目录中。

$$tip

当字体名字间有空格时应用双引号把字体名包裹起来。

引入字体文件

@font-face 可以指定路径引入一个字体文件。示例中通过 url 引入了一个字体文件取名 xiaowei ，并指定为 h1 元素的 font-family 。

<h1>三眼鸭的三眼鸭</h1>
<style>
    @font-face {
        font-family: xiaowei;
        src: url("/fonts/ZCOOLXiaoWei-Regular.ttf");
    }

    h1 {
        /* 引入的字体名 */
        font-family: xiaowei;
    }
</style>

$$demo

<h1>三眼鸭的三眼鸭</h1> <style> @font-face { font-family: "xiaowei"; src: url("/fonts/ZCOOLXiaoWei-Regular.ttf"); }

h1 {
    /* 引入的字体名 */
    font-family: xiaowei;
}

</style>

$$tip

如果示例中的字体未产生变化，可以稍后刷新一下页面，因为字体文件通常较大加载略慢。

$$tip

使用字体文件时需要注意版权问题，如果要挑选免费的字体可以到 google fonts。

练习

实现下面的字体效果。

$$demo

<p>三眼鸭的三眼鸭</p> <style> p { font-size: 36px; font-weight: 300; font-style: italic; } </style> $$

$$answer

<p>三眼鸭的三眼鸭</p>
<style>
    p {
        font-size: 36px;
        font-weight: 300;
        font-style: italic;
    }
</style>

引入你喜欢的字体展示一段文本。

字体粗细

字体大小

字体样式

字体族名

引入字体文件

练习