如何在整個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 次瀏覽