Processing math: 100%

如何在整个HTML文档中应用全局字体？

有时我们希望为所有元素设置一个基础属性，并允许更具体的选择器根据需要为某些元素进行调整。也有一些情况，尤其是在进行简短的临时测试时，我们希望字体应用于所有文本，无论如何。

设置全局字体的方法

您可以使用以下方法将全局字体设置为整个HTML文档。

开始使用这些方法

在这里，您将看到上面提到的每种方法的示例，以将全局字体设置为整个HTML文档。

使用通用选择器

我们可以使用CSS通用选择器(*)来选择整个HTML文档并定义字体系列。因此，整个HTML文档将遵循所有元素上定义的字体系列。

示例

在下面的示例中，我们将使用上述方法。

<!DOCTYPE html>
<html>
<head>
    <title>Online HTML Editor</title>
    <style>
        * {
            font-family: Verdana !important;
            
        }
    </style>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <p>This is real time online HTML Editor</p>
</body>
</html>

输出

Global Font to the Entire HTML

使用!important关键字

如果您不小心为某个元素定义了任何字体系列，并且该字体系列可能被此!important关键字覆盖，则需要CSS !important关键字。

示例

在这个示例中，我们将使用通用属性应用字体系列，并为特定元素定义另一个字体系列。

<!DOCTYPE html>
<html>
<head>
    <title>Online HTML Editor</title>
    <style>
        /* Has priority over all other font-family
           declarations in the document */
        * {
            font-family: Verdana !important;
            
        }

        /* This won't apply due to !important */
        p {
            font-family: Arial;
        }
    </style>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <p>This is real time online HTML Editor</p>
</body>
</html>

输出

Global Font to the Entire HTML

结论

现在您已经知道如何广泛地为整个文档设置属性，记住何时这样做是至关重要的。HTML/CSS 最重要的功能之一是能够根据标签、ID等对元素的外观进行精细控制。虽然可以使用 * 来为整个页面设置字体，但您应该谨慎使用，因为它可能会破坏您以后更精确地更改字体的能力。!important 非常强大，但它会削弱其余 CSS 的多功能性。

更新于：2024年9月23日

56 次浏览