網頁字型

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

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

這個系統執行良好，但傳統上網頁開發人員的字型選擇是有限的。只有少數字體可以保證在所有常見系統上可用，即所謂的 網頁安全字型。你可以使用字型棧指定首選字型，然後是網頁安全字型，最後是預設系統字型。但是，這會增加你的工作量，因為需要進行測試以確保你的設計在每種字型下都能正常工作。

但是有一個非常有效的替代方法。CSS 允許你指定可從網頁下載的字型檔案，這些字型檔案會隨著你的網站一起下載。這意味著任何支援此 CSS 功能的瀏覽器都可以顯示你選擇的字型。太棒了！所需的語法如下所示

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

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

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

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

語法比這稍微複雜一些。我們將在下面詳細介紹。

以下是一些關於網頁字型的注意事項：

1. 字型通常不是免費使用的。你需要付費或遵守其他許可條件，例如在你的程式碼（或你的網站上）中註明字型建立者的署名。你不應該盜用字型並在未經適當署名的情況下使用它們。
2. 所有主流瀏覽器都支援 WOFF/WOFF2（Web 開放字型格式版本 1 和 2）。即使是 IE9（於 2011 年釋出）等舊版瀏覽器也支援 WOFF 格式。
3. WOFF2 支援 TrueType 和 OpenType 規範的全部內容，包括可變字型、色度字型和字型集合。
4. 列出字型檔案的順序很重要。如果你為瀏覽器提供多個要下載的字型檔案，瀏覽器將選擇它能夠使用的第一個字型檔案。這就是為什麼你首先列出的格式應該是首選格式，即 WOFF2，然後是較舊的格式。不支援一種格式的瀏覽器將回退到列表中的下一種格式。
5. 如果你需要處理舊版瀏覽器，則應提供 EOT（嵌入式 OpenType）、TTF（TrueType 字型）和 SVG 網頁字型以供下載。本文介紹瞭如何使用 Fontsquirrel 網頁字型生成器生成所需的檔案。

你可以使用 Firefox 字型編輯器 來調查和操作頁面上使用的字型，無論是網頁字型還是其他字型。此影片提供了一個很好的逐步說明。

考慮到這一點，讓我們從基本原理開始構建一個基本的網頁字型示例。使用嵌入式即時示例很難演示這一點。因此，我們希望您按照以下各節中詳細介紹的步驟來了解這個過程。

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

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

• 免費字型分發商：這是一個提供免費字型下載的網站（可能仍然有一些許可條件，例如為字型建立者提供署名）。例如 Font Squirrel、dafont 和 Everything Fonts。
• 付費字型分發商：這是一個收費提供字型的網站，例如 fonts.com 或 myfonts.com。您也可以直接從字型鑄造廠購買字型，例如 Linotype、Monotype 或 Exljbris。
• 線上字型服務：這是一個為您儲存和提供字型的網站，使整個過程更加輕鬆。有關更多詳細資訊，請參閱 使用線上字型服務 部分。

讓我們找到一些字型！訪問 Font Squirrel 並選擇兩種字型：一種有趣的標題字型（可能是一個漂亮的顯示字型或襯線字型），以及一種不太花哨且更易讀的段落字型。找到字型後，按下下載按鈕並將檔案儲存到與您之前儲存的 HTML 和 CSS 檔案相同的目錄中。它們是 TTF（True Type Fonts）還是 OTF（Open Type Fonts）並不重要。

解壓縮這兩個字型包（網頁字型通常以 ZIP 檔案的形式分發，其中包含字型檔案和許可資訊）。您可能會在包中找到多個字型檔案 - 一些字型作為具有不同變體的系列分發，例如細體、中等、粗體、斜體、細斜體等。在這個示例中，我們只希望您關注每個選擇的單個字型檔案。

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

1. 如果您要在商業和/或 Web 專案中使用它，請確保您已滿足任何許可要求。
2. 訪問 Fontsquirrel 的 Webfont Generator。
3. 使用“上傳字型”按鈕上傳您的兩個字型檔案。
4. 選中“是的，我上傳的字型在法律上符合網頁嵌入資格”複選框。
5. 點選“下載您的工具包”。

生成器處理完成後，您應該會得到一個 ZIP 檔案供下載。將其儲存到與您的 HTML 和 CSS 相同的目錄中。

如果您需要支援舊瀏覽器，請在 Fontsquirrel Webfont Generator 中選擇“專家”模式，在下載您的工具包之前選擇 SVG、EOT 和 TTF 格式。

字型生成網頁服務通常限制檔案大小。在這種情況下，請考慮使用以下工具

1. sfnt2woff-zopfli 用於將 ttf 轉換為 woff
2. fontforge 用於將 ttf 轉換為 svg
3. batik ttf2svg 用於將 ttf 轉換為 svg
4. woff2 用於將 ttf 轉換為 woff2

此時，解壓縮您剛剛生成的網頁字型工具包。在解壓縮的目錄中，您會看到一些有用的專案

• 每種字型的兩個版本：.woff、.woff2 檔案。
• 每個字型的演示 HTML 檔案 - 在瀏覽器中載入這些檔案以檢視字型在不同使用環境中的顯示效果。
• 一個 stylesheet.css 檔案，其中包含您需要的生成的 @font-face 程式碼。

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

1. 將解壓縮的目錄重新命名為一個簡單易懂的名稱，例如 fonts。
2. 開啟 stylesheet.css 檔案並將兩個 @font-face 規則集複製到您的 web-font-start.css 檔案中 - 您需要將它們放在最頂部，位於任何 CSS 之前，因為字型需要在您可以在網站上使用它們之前匯入。
3. 每個 url() 函式都指向我們想要匯入 CSS 的字型檔案。我們需要確保檔案路徑是正確的，因此在每個路徑的開頭新增 fonts/（根據需要調整）。
4. 現在您可以在您的字型棧中使用這些字型，就像任何網頁安全字型或預設系統字型一樣。例如
   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;
   }
   

   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。

讓我們探索 Fontsquirrel 為您生成的 @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-family：這行指定您要用來引用字型的名稱。只要您在整個 CSS 中始終如一地使用它，它可以是您喜歡的任何名稱。
• src：這些行指定要匯入 CSS 的字型檔案的路徑（url 部分）和每個字型檔案的格式（format 部分）。每個情況下的後半部分是可選的，但宣告它是很有用的，因為它允許瀏覽器更快地確定它們可以使用哪個字型。可以列出多個宣告，用逗號分隔。由於瀏覽器會根據級聯規則在其中搜索，因此最好將首選格式（如 WOFF2）放在開頭。
• font-weight/font-style：這些行指定字型的粗細和是否為斜體。如果您要匯入同一字型的多個粗細，您可以指定它們的粗細/樣式，然後使用 font-weight/font-style 的不同值在它們之間進行選擇，而不是必須為字體系列的所有不同成員賦予不同的名稱。@font-face 技巧：定義 font-weight 和 font-style 以使您的 CSS 更簡潔，由 Roger Johansson 詳細介紹了該怎麼做。

瀏覽器中有一種較新的字型技術，稱為可變字型。這些字型允許將字型的許多不同變體合併到一個檔案中，而不是為每種寬度、粗細或樣式建立一個單獨的字型檔案。它們對於我們的初學者課程來說有點先進，但如果您想挑戰自己並研究它們，請閱讀我們的 可變字型指南。

既然您已經完成了我們關於文字樣式基礎知識的文章，現在是時候用我們為該模組提供的評估來測試您的理解了：排版社群學校主頁。

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