Web 字型

字體系列回顧

正如我們在基礎文字和字型樣式中所看到的，應用於 HTML 的字型可以使用 font-family 屬性進行控制。它接受一個或多個字體系列名稱。顯示網頁時，瀏覽器將遍歷字體系列值列表，直到找到其執行系統上可用的字型。

p {
  font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;
}

這個系統執行良好，但傳統上 Web 開發人員的字型選擇受到限制。只有少數幾種字型可以保證在所有常見系統上都可用——這就是所謂的Web 安全字型。您可以使用字型堆疊來指定首選字型，然後是 Web 安全替代字型，然後是預設系統字型。但是，由於需要進行測試以確保您的設計適用於每種字型，這增加了您的工作量。

Web 字型

有一個執行良好的替代方案。CSS 允許您指定 Web 上可用的字型檔案，以便在訪問您的網站時與您的網站一起下載。這意味著任何支援此 CSS 功能的瀏覽器都可以顯示您專門選擇的字型。太棒了！所需的語法看起來像這樣：

首先，您在 CSS 的開頭有一個 @font-face 規則集，它指定要下載的字型檔案。

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

在此之下，您可以使用 @font-face 中指定的字體系列名稱，像往常一樣將自定義字型應用於您喜歡的任何內容。

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

語法會比這更復雜一些。我們將在下面詳細介紹。

以下是關於 Web 字型需要牢記的一些重要事項：

1. 字型通常不是免費使用的，並且有使用限制。您必須付費和/或遵守其他許可條件，例如在您的程式碼（或網站）中註明字型創作者。您不應在未註明出處的情況下竊取和使用字型。
2. 所有主流瀏覽器都支援 WOFF/WOFF2（Web Open Font Format 版本 1 和 2）。甚至較舊的瀏覽器（例如 2011 年釋出的 IE9）也支援 WOFF 格式。
3. WOFF2 支援 TrueType 和 OpenType 規範的全部內容，包括可變字型、彩色字型和字型集合。
4. 字型檔案列表的順序很重要。如果您向瀏覽器提供多個要下載的字型檔案列表，瀏覽器將選擇它能夠使用的第一個字型檔案。這就是為什麼您首先列出的格式應該是首選格式——即 WOFF2——之後列出較舊的格式。不理解某種格式的瀏覽器將回退到列表中的下一個格式。
5. 如果需要與舊版瀏覽器配合使用，您應該提供 EOT（嵌入式 OpenType）、TTF（TrueType 字型）和 SVG Web 字型供下載。本文介紹瞭如何使用 Fontsquirrel Webfont Generator 生成所需的檔案。

您可以使用 Firefox 字型編輯器來檢查和操縱頁面上使用的字型，無論它們是否是 Web 字型。

新增您自己的 Web 字型

考慮到這一點，我們現在將要求您從頭開始構建一個基本的 Web 字型示例。使用嵌入式即時示例很難演示這一點。因此，我們希望您按照以下部分中詳細說明的步驟來了解此過程。

您應該使用 web-font-start.html 和 web-font-start.css 檔案作為起點來新增您的程式碼（請參閱即時示例）。現在將這些檔案複製到您計算機上的新目錄中。在 web-font-start.css 檔案中，您會找到一些最小的 CSS 來處理示例的基本佈局和排版。

查詢字型

對於此示例，我們將使用兩種 Web 字型：一種用於標題，一種用於正文。首先，我們需要找到包含這些字型的字型檔案。字型由字型鑄造廠建立，並以不同的檔案格式儲存。通常有三種類型的網站可以獲取字型：

• 免費字型分發商：此網站提供免費字型下載（可能仍有一些許可條件，例如註明字型創作者）。示例包括 Font Squirrel、DaFont 和 Everything Fonts。
• 付費字型分發商：此網站提供收費字型，例如 fonts.com 或 myfonts.com。您也可以直接從字型鑄造廠購買字型，例如 Linotype、Monotype 或 Exljbris。
• 線上字型服務：此網站為您儲存和提供字型，使整個過程更簡單。有關更多詳細資訊，請參閱使用線上字型服務部分。

讓我們找一些字型！前往 Font Squirrel 並選擇兩種字型：一種用於標題的漂亮有趣的字型（也許是一種漂亮的顯示字型或襯線字型），以及一種用於段落的略微不那麼華麗且更易讀的字型。找到字型後，點選下載按鈕並將檔案儲存到您之前儲存的 HTML 和 CSS 檔案所在的同一目錄中。它們是 TTF（True Type 字型）還是 OTF（Open Type 字型）都無關緊要。

解壓這兩個字型包（Web 字型通常以 ZIP 檔案形式分發，其中包含字型檔案和許可資訊）。您可能會在包中找到多個字型檔案——有些字型以系列形式分發，提供不同的變體，例如細體、中等、粗體、斜體、細斜體等。對於此示例，我們只需要您關注每種選擇的一個字型檔案。

生成所需程式碼

現在您需要生成所需的程式碼（和字型格式）。對於每種字型，請按照以下步驟操作：

1. 如果您打算在商業和/或 Web 專案中使用此字型，請確保您已滿足任何許可要求。
2. 轉到 Transfonter Webfont Generator。
3. 使用新增字型按鈕上傳您的兩個字型檔案。
4. 點選轉換。
5. 點選下載。

ZIP 檔案下載完成後。解壓並將其移動到您的 HTML 和 CSS 檔案所在的同一目錄中。

在您的演示中實現程式碼

在解壓後的目錄中，您會看到一些有用的專案：

• 每種字型的兩個版本：.woff 和 .woff2 檔案。
• 每種字型的演示 HTML 檔案 — 在瀏覽器中載入它們，檢視字型在不同使用上下文中的外觀。
• 一個 stylesheet.css 檔案，其中包含您需要的生成的 @font-face 程式碼。

要在您的演示中實現這些字型，請按照以下步驟操作：

1. 將解壓後的目錄重新命名為簡單易懂的名稱，例如 fonts。

2. 開啟 stylesheet.css 檔案，並將兩個 @font-face 規則集複製到您的 web-font-start.css 檔案中——您需要將它們放在最頂部，在任何 CSS 之前，因為字型需要在您可以在您的站點上使用它們之前匯入。

3. 每個 url() 函式都指向我們想要匯入到 CSS 中的字型檔案。我們需要確保檔案路徑正確，因此在每個路徑的開頭新增 fonts/（根據需要進行調整）。

4. 現在您可以在字型堆疊中使用這些字型，就像任何 Web 安全字型或預設系統字型一樣。例如：

   css

   @font-face {
     font-family: "zantrokeregular";
     src:
       url("fonts/zantroke-webfont.woff2") format("woff2"),
       url("fonts/zantroke-webfont.woff") format("woff");
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }
   

   css

   font-family: "zantrokeregular", serif;
   

您最終應該得到一個已實現一些漂亮字型的演示頁面。由於不同的字型以不同的尺寸建立，您可能需要調整尺寸、間距等，以整理外觀。

使用線上字型服務

線上字型服務通常為您儲存和提供字型，這樣您就不必擔心編寫 @font-face 程式碼。相反，您通常只需在您的網站中插入一兩行簡單的程式碼即可使一切正常執行。示例包括 Adobe Fonts 和 Cloud.typography。這些服務大多是訂閱制的，值得注意的是 Google Fonts 除外，它是一個有用的免費服務，尤其適用於快速測試工作和編寫演示。

這些服務大多易於使用，因此我們不會詳細介紹。讓我們快速瞭解一下 Google Fonts，以便您瞭解其理念。再次，使用 web-font-start.html 和 web-font-start.css 的副本作為您的起點。

1. 前往 Google Fonts。
2. 搜尋您喜歡的字型或使用頁面頂部的過濾器顯示您想要選擇的字型型別並選擇您喜歡的幾種字型。
3. 要選擇字體系列，請單擊字型預覽，然後按字型旁邊的 ⊕ 按鈕。
4. 選擇字體系列後，點選頁面右上角的檢視您選擇的系列按鈕。
5. 在出現的螢幕中，您首先需要複製顯示的 HTML 程式碼行並將其貼上到 HTML 檔案的頭部。將其放在現有 <link> 元素上方，以便在您嘗試在 CSS 中使用字型之前匯入字型。
6. 然後，您需要將列出的 CSS 宣告適當地複製到您的 CSS 中，以將自定義字型應用於您的 HTML。

@font-face 詳情

讓我們探索 Transfonter 為您生成的 @font-face 語法。規則集看起來像這樣：

@font-face {
  font-family: "zantrokeregular";
  src:
    url("zantroke-webfont.woff2") format("woff2"),
    url("zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

讓我們逐一分析，看看它做了什麼：

• font-family：此行指定您希望引用該字型的名稱。您可以隨意命名，只要在整個 CSS 中保持一致即可。
• src：這些行指定要匯入到 CSS 中的字型檔案的路徑（url 部分）以及每個字型檔案的格式（format 部分）。後一部分在每種情況下都是可選的，但宣告它很有用，因為它允許瀏覽器更快地確定它們可以使用哪種字型。可以列出多個宣告，用逗號分隔。由於瀏覽器將根據級聯規則搜尋它們，因此最好將您首選的格式（如 WOFF2）放在開頭。
• font-weight/font-style：這些行指定字型的粗細以及是否為斜體。如果您匯入同一種字型的多種粗細，您可以指定它們的粗細/樣式，然後使用不同的 font-weight/font-style 值來選擇它們，而無需為字體系列的所有不同成員呼叫不同的名稱。@font-face tip: define font-weight and font-style to keep your CSS simple by Roger Johansson 更詳細地展示了該怎麼做。
• font-display：此行指定字型在載入時的顯示方式。

總結

既然您已經完成了我們關於文字樣式基礎知識的文章，現在是時候透過我們的模組挑戰來測試您的理解了：排版一個社群學校主頁。

另見

• 可變字型指南
• 字型知識，Google Fonts

• 上一頁
• 概述：CSS 文字樣式
• 下一頁