CSS - 字体

CSS 字体允许使用各种与字体相关的属性来自定义网页的字体样式。在本教程中，我们将了解 CSS 中的字体样式。

什么是 CSS 字体？

在 CSS 中，font 属性用于设置和调整网页中使用的文本类型。

您可以定义字体并通过设置属性（如font-family, font-size, font-weight 和 font-style.）来自定义其外观。您还可以使用简写属性font 来操作所有字体样式。

字体类型的种类

等宽字体：每个字母宽度相同的字体。
衬线字体：每个字母边缘都有小笔画的字体。
非衬线字体：没有笔画的简洁字体。
幻想字体：装饰性的花哨字体。
草书字体：类似于人类手写的字体。

流行的 CSS 字体

通用字体系列	字体名称示例
衬线	Times New Roman Georgia Garamond
非衬线	Arial Verdana Helvetica
等宽	Courier New Lucida Console Monaco
草书	Brush Script MT Lucida Handwriting
幻想	Copperplate Papyrus

CSS 字体系列属性

font-family 属性用于指定文本内容的字体名称。

语法

selector {
      font-family: family-name, generic-family;
}

示例

这是一个使用 font-family 属性的示例。

<html>
<head>
    <style>
        p {
            font-family: Lucida Handwriting, Cursive;
        }
    </style> 
</head>

<body>
    <p >
        This is a font that written in Lucida 
        Handwriting. THis is a font that looks 
        like human handwriting.
    </p>
</body>
</html>

调整字体粗细、大小和样式

在 CSS 中，我们可以使用font-size, font-weight 和 font-style. 属性来修改文本的大小、粗细和样式。

示例

让我们检查一个关于此的示例。

<html>
<head>
    <style>
        .font-size-example {
            font-size: 20px; 
        }

        .font-weight-example {
            font-weight: bold; 
        }

        .font-style-example {
            font-style: italic; 
        }
    </style>
</head>

<body>
    <p class="font-size-example">
        This is an example of text with an 
        adjusted font size.
    </p>

    <p class="font-weight-example">
        This is an example of text with an 
        adjusted font weight.
    </p>

    <p class="font-style-example">
        This is an example of text with an 
        adjusted font style.
    </p>
</body>
</html>

CSS 字体简写属性

在 CSS 中，我们可以使用font 简写属性来修改文本的大小、粗细和样式。

示例

在这个示例中，我们将使用 font 简写属性来设置字体样式、粗细、大小和系列。

<html>
<head>
    <style>
    .font-example {
        /* in-order: font style, weight, size, family */
        font: italic bold 20px Arial, sans-serif; 
    }
    </style>
</head>

<body>
    <p class="font-example">
        This is an example of text with an adjusted 
        font style, weight, and size using the font 
        shorthand property.
    </p>
</body>
</html>

CSS 与字体相关的属性

以下是所有与font相关的 CSS 属性列表

属性	描述	示例
font-family	指定元素的字体。	试一试
font-size	指定字体的尺寸。	试一试
font-weight	指定字体的粗细。	试一试
font-style	指定字体的样式（normal、italic、oblique）。	试一试
font-variant	指定文本是否应该以小型大写字体显示。	试一试
line-height	指定行高。	试一试

打印页面