在 CSS 中匯入 Google 字型
在本教程中,我們將學習一些在 CSS 中匯入 Google 字型的方法。
在 CSS 中使用 @import
規則匯入 Google 字型
CSS @import
規則用於在樣式表中匯入另一個樣式表。我們可以在 url()
函式中將樣式表指定為字串。
我們還可以使用 @import
規則在 CSS 中匯入外部字型。例如,我們可以在 url()
函式中使用 Google 字型,並使用 font-family
屬性設定字型。
Google Fonts 有多種字型可供我們選擇。我們可以從網站上獲取字型的 URL。
例如,轉到 Google Fonts 網站並選擇 Roboto
字型。然後,單擊右側邊欄中的@import
單選按鈕。
接下來,複製 style
標籤之間的 URL。類似地,在 HTML 中,建立 h1
和 p
標籤。
在 CSS 中,在樣式表的頂部編寫 @import
規則並將 Roboto
字型 URL 貼上到 url()
函式中。選擇字型 Outfit
並獲取 URL。
接下來,選擇 h1
標籤並使用 font-family
屬性設定字型 Outfit
。同樣,在段落中設定字型 Roboto
。
這樣,我們就可以在樣式表中匯入 google 字型。
但是,不鼓勵使用 @import
規則匯入 Google 字型。這是因為除非獲取檔案,否則字型不會顯示在網頁上。
示例程式碼:
<h1> Title </h1>
<p>This is Roboto font.</p>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
h1 {
font-family: 'Outfit', sans-serif;
}
p {
font-family: 'Roboto', sans-serif;
}
在 CSS 中使用 link
標籤匯入 Google 字型
link
標籤是在 HTML 中匯入 Google 字型的最合適的方式。鼓勵使用 link
標籤,因為它預載入了字型。
我們可以在 link
標籤的 href
屬性中指定字型 URL。我們可以從 Google Fonts 網站生成所有 link
標籤。
例如,轉到 Google Fonts 網站並選擇 Comforter Brush
字型。選擇 link
單選按鈕並複製生成的 link
標籤。
然後,將標籤貼上到 HTML 中並建立一個 p
標籤並在其中寫入一些文字。接下來,在 CSS 中選擇 p
標記並將 font-family
屬性設定為 Comforter Brush
。
我們在前兩個 link
標籤中使用了 preconnect
作為 rel
屬性。它讓瀏覽器知道使用者需要 href
屬性中的資源,以便瀏覽器可以發起對資源的搶佔式連線。
這樣,我們就可以使用 link
標籤在 CSS 中匯入 Google 字型。
示例程式碼:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet">
<p>Comforter Brush font.</p>
p {
font-family: 'Comforter Brush', cursive;
}
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn