CSS - 字体

原创

admin 4个月前 (08-07) 阅读数 24 #CSS

CSS - 字体

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

什么是CSS字体？

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

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

CSS字体类型

等宽字体：每个字母宽度相等的字体。
衬线字体：每个字母边缘有小笔画的字体。
无衬线字体：没有任何笔画的干净字体。
装饰字体：装饰性花哨的字体。
手写体：类似人类手写体的字体。

流行的CSS字体

下表列出了一些流行字体及其通用字体系列。

通用字体系列	字体名称示例
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

设置文本字体

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

示例

在此示例中，我们使用font-family属性设置段落元素的字体。

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

<body>
    <p>
        这是一种用Lucida Handwriting书写的字体。
        这是一种看起来像人类手写体的字体。
    </p>
</body>
</html>

设置文本字体大小

要设置文本的字体大小，我们使用font-size属性。您可以使用其值如small、medium和large来获得各种文本字体大小。

示例

在此示例中，我们使用font-size属性及其不同值来设置文本大小。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>字体大小示例</title>
    <style>
        .small {
            font-size: small;
        }

        .medium {
            font-size: medium;
        }

        .larger {
            font-size: larger;
        }

        .px {
            font-size: 18px;
        }

        .percent {
            font-size: 120%;
        }
    </style>
</head>
<body>
    <h2>CSS字体大小示例</h2>
    <p class="small">这段文本具有'small'字体大小。</p>
    <p class="medium">这段文本具有'medium'字体大小。</p>
    <p class="larger">这段文本具有'larger'字体大小。</p>
    <p class="px">这段文本具有18px的字体大小。</p>
    <p class="percent">这段文本具有120%的字体大小。</p>
</body>
</html>

设置字体粗细

您可以使用font-weight属性来设置文本的粗细。

示例

在此示例中，我们使用font-weight属性设置文本的粗细。对于number类，有效的数值范围是100-900。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS font-weight属性示例</title>
    <style>
        .normal {
            font-weight: normal;
        }

        .bold {
            font-weight: bold;
        }

        .lighter {
            font-weight: lighter;
        }

        .number {
            font-weight: 600;
        }
    </style>
</head>
<body>
    <h2>CSS font-weight属性</h2>
    <p class="normal">这段文本具有'normal'字体粗细。</p>
    <p class="bold">这段文本具有'bold'字体粗细。</p>
    <p class="lighter">这段文本具有'lighter'字体粗细。</p>
    <p class="number">这段文本具有600的字体粗细。</p>
</body>
</html>

设置字体样式

要设置书写文本的样式，我们使用font-style属性。文本可以设置为normal、italic或oblique。

示例

在此示例中，我们使用font-style属性设置书写文本的样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>CSS font-style属性示例</title>
    <style>
        .normal {
            font-style: normal;
        }

        .italic {
            font-style: italic;
        }

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

<body>
    <h2>CSS font-style属性</h2>
    <p class="normal">它具有'normal'字体样式。</p>
    <p class="italic">它具有'italic'字体样式。</p>
    <p class="oblique">它具有'oblique'字体样式。</p>
</body>

</html>

CSS字体简写属性

您可以使用font简写属性来修改文本的大小、粗细和样式。

示例

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

<html>
<head>
    <style>
    .font-example {
        /* 按顺序：字体样式、粗细、大小、系列 */
        font: italic bold 20px Arial, sans-serif; 
    }
    </style>
</head>

<body>
    <p class="font-example">
        这是一个使用字体简写属性调整了字体样式、
        粗细和大小的文本示例。
    </p>
</body>
</html>

CSS字体相关属性

下表列出了所有与font相关的CSS属性：

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