在 CSS 中匯入 Google 字型

1. 在 CSS 中使用 @import 規則匯入 Google 字型
2. 在 CSS 中使用 link 標籤匯入 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;
}