CSS3 字体学习笔记

CSS3提供了丰富的字体属性，可以让我们自由地定义字体的大小、颜色、字形、间距等。本文将从以下几个方面介绍CSS3中字体相关的知识。

字体族

字体族（font-family）是指一组字体，浏览器会按照字体列表中的顺序逐个查找，直到找到用户系统中安装的合适的字体为止。以下是一个简单的字体族示例：

cssCopy Code
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

其中，如果用户系统中安装了"Helvetica Neue"字体，则使用该字体；否则使用"Helvetica"字体；如果"Helvetica"也没有，则使用"Arial"字体；如果最后都没有找到，则使用系统默认的无衬线字体。

字体样式

CSS3中有多种字体样式，包括斜体、粗体、下划线、删除线等。以下是一些常用的示例：

cssCopy Code
/* 斜体 */
em {
    font-style: italic;
}

/* 粗体 */
strong {
    font-weight: bold;
}

/* 下划线 */
u {
    text-decoration: underline;
}

/* 删除线 */
del {
    text-decoration: line-through;
}

字体间距

CSS3中可以通过letter-spacing属性来调整字体间距。以下是一个示例：

cssCopy Code
h1 {
    letter-spacing: 0.1em;
}

字体阴影

CSS3中可以通过text-shadow属性为字体添加阴影效果。以下是一个示例：

cssCopy Code
h1 {
    text-shadow: 1px 1px #ccc;
}

实例

以下是一个使用了上述知识的示例：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3 字体学习</title>
    <style>
        body{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        h1{
            font-size: 36px;
            font-style: italic;
            letter-spacing: 0.2em;
            text-shadow: 2px 2px #ddd;
        }
        p{
            font-size: 16px;
            line-height: 1.5em;
            text-decoration: underline;
        }
        strong{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>CSS3 字体学习笔记</h1>
    <p>本文介绍了CSS3中字体族、字体大小、字体样式、字体间距、字体阴影等相关知识。</p>
    <p><strong>字体族：</strong>指一组字体，按照顺序逐个查找。</p>
    <p><strong>字体大小：</strong>可以使用像素、百分比和相对单位等多种方式指定字体大小。</p>
    <p><strong>字体样式：</strong>包括斜体、粗体、下划线、删除线等。</p>
    <p><strong>字体间距：</strong>可以通过letter-spacing属性调整字体间距。</p>
    <p><strong>字体阴影：</strong>可以通过text-shadow属性为字体添加阴影效果。</p>
</body>
</html>

以上就是一份简单的CSS3字体学习笔记，如果想要深入了解CSS3字体相关知识，可以参考官方文档或者相关书籍。