CSS - 網頁字型

上一頁
下一頁

網站上使用的但使用者裝置上未預設安裝的字型稱為網頁字型。CSS允許指定可在網上獲取的字型檔案，以便在訪問您的網站時輕鬆下載。

CSS 網頁字型 - 字型格式型別

下面解釋了不同型別的字型格式

  • TrueType 字型 (TTF)：TrueType 字型是由 Apple 開發的輪廓字型。它是 MacOS 和 Windows 作業系統中最常見的字型格式。

  • OpenType 字型 (OTF)：OpenType 字型源自 TrueType 字型格式的基本結構，但增加了許多額外的複雜資料結構。它提供了更多排版控制。

  • Web Open Font Format (WOFF)：顧名思義，它是由 Mozilla 開發的一種開放式網頁字型。它使用 TrueType、OpenType 和 Open Font Format 使用的結構的壓縮版本，以及元資料和專用資料結構的其他資訊。

  • Web Open Font Format2 (WOFF2)：它是 Web Open Font Format 的第二個版本。表示為woff2。這種字型比 woff 具有更好的壓縮演算法。

  • SVG 字型/形狀：SVG 字型是 OpenType 字型格式的新版本。此格式允許以多種顏色、不同的透明度甚至動畫顯示字元。

  • 嵌入式 Open Type 字型 (EOT)：這些是微軟設計的 OpenType 字型的緊湊形式，用作網頁上的嵌入式字型。它們僅受 Microsoft Internet Explorer 支援。

CSS 網頁字型 - 關鍵點

以下部分指定了與網頁字型相關的幾個重要點

  • 網頁上的字型通常不是免費的。您需要付費使用它們，或者遵循許可條件，例如在您的程式碼或網站上給予字型建立者署名。竊取這些字型或未經適當署名使用是不道德的。

  • Web Open Font Format 版本 1 和 2 (WOFF 和 WOFF2) 受大多數瀏覽器支援，即使是舊版本。

  • WOFF2 檔案格式完全支援 TrueType 和 OpenType 規範，包括可變字型、彩色字型和字型集合。

  • 字型檔案的列出順序很重要。瀏覽器會從提供的多個字型檔案列表中選擇它能夠使用的第一個字型檔案。因此，您應該首先列出首選格式。當瀏覽器不理解某種格式時，它會回退到下一個格式。

  • 使用舊版瀏覽器時，您應提供 EOT（嵌入式 Open Type）、TTF（True Type 字型）和 SVG 網頁字型供下載。

CSS 網頁字型 - @font-face @規則

使用@font-face CSS @規則，可以為網站指定未安裝在使用者裝置上的字型。@font-face @規則有很多描述符來識別和描述字型。請參考以下程式碼塊以瞭解 @font-face @規則的語法

@font-face {
   font-family: "Sansation Light Font";
   src: url("font/SansationLight.woff") format("woff");
   font-weight: normal;
   font-style: normal;
}

以上語法列出了以下屬性

  • font-family：指定您用來引用字型的名稱。名稱可以是您想要的任何名稱，但您應該在 CSS 程式碼中始終如一地使用此名稱。

  • src：透過url()指定要匯入到 CSS 中的字型檔案的路徑，並透過可選的format指定字型檔案的格式。指定format非常有用，因為它允許瀏覽器確定需要使用的字型。可以使用逗號分隔值進行多個宣告。

  • font-weight：指定字型的粗細（或粗體）。接受兩個值以指定字型支援的範圍，例如 font-weight: 100 400;

  • font-style：指定字型的樣式應為其字體系列中的普通、斜體或傾斜樣式。

注意：在較新的瀏覽器中，還可以為網頁字型指定諸如font-variant和font-stretch之類的值，以及unicode-range。當僅當頁面包含此範圍內指定的字元時才下載字型時，此範圍非常有用，從而避免不必要的下載。

讓我們來看一個應用 @font-face @規則的例子

<html>
<head> 
<style>
   @font-face {
      font-family: "Sansation Light Font";
      src: url("font/SansationLight.woff");
   }
   body {
      font-family: "Sansation Light Font", serif;
   }
</style>
</head>
<body>
   <h2>@font-face at-rule</h2>
   <p>This is SansationLight Font.</p>
</body>
</html>

CSS 網頁字型 - @font-face / font-stretch

以下示例演示了使用@font-face @規則中使用的百分比範圍50% 和 200%設定字型樣式的拉伸值

<html>
<head> 
<style>
   @font-face {
      src: local("monospace");
      font-family: "f1";
      font-style: normal;
      font-stretch: 50% 200%;
   }

   .container {
      font: 2rem "f1", sans-serif;
   }

   .font-condensed {
      font-stretch: 50%;
   }

   .font-normal {
      font-stretch: 100%;
   }

   .font-ultra-expanded {
      font-stretch: 200%;
   }

   .font-semi-condensed {
      font-stretch: semi-condensed;
   }

   .font-extra-condensed {
      font-stretch: extra-condensed;
   }

   .font-ultra-condensed {
      font-stretch: ultra-condensed;
   }

   .font-semi-expanded {
      font-stretch: semi-expanded;
   }

   .font-extra-expanded {
      font-stretch: extra-expanded;
   }
</style>
</head>
<body>
   <div class="container">
      <p class="font-condensed">ultra-condensed (50%)</p>
      <p class="font-normal">normal (100%)</p>
      <p class="font-expanded">ultra-expanded (200%)</p>
      <p class="font-semi-condensed">semi-condensed</p>
      <p class="font-ultra-condensed">ultra-condensed</p>
      <p class="font-semi-expanded">semi-expanded</p>
      <p class="font-extra-expanded">extra-expanded</p>
      </div>
</body>
</html>

以上示例顯示了@font-face @規則及其描述符（如font-family、src、font-style和font-stretch）的宣告。

CSS 網頁字型 - 線上字型服務

大多數線上字型服務都是基於訂閱的，通常儲存和提供您可以使用的字型。Google Fonts是一項免費且易於使用的服務。請參考以下步驟使用 Google Fonts

  • 訪問Google Fonts。

  • 搜尋您想要的字型，或使用提供的篩選器查詢您選擇的字型，然後選擇幾種字型。

  • 您可以透過單擊字型名稱旁邊的（+）加號按鈕來選擇字體系列。

  • 選擇字體系列後，按檢視您選擇的字體系列按鈕。

  • 複製結果螢幕上顯示的 HTML 程式碼行，並將其貼上到您的 HTML 程式碼中，位於<head>標籤下。將其放在<link>元素上方，以便在 CSS 中使用之前匯入所需的字型。

  • 為了將自定義字型應用於您的 HTML，請複製 CSS 中列出的 CSS 宣告。

CSS 網頁字型 - 匯入字型

以下示例演示了在 HTML 程式碼中匯入 Google 字型並使用它。

<html>
<head>
   <link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
<style>
   html {
      font-size: 12px;
      margin: 0;
      font-family: sans-serif;
   }

   body {
      width: 80%;
      max-width: 600px;
      margin: 0 auto;
   }

   h1 {
      font-size: 4.2rem;
   }

   h2 {
      font-size: 3.5rem;
   }

   h1, h2 {
      font-family: 'Lobster', cursive;
   }

   p {
      font-size: 1.4rem;
      line-height: 1.6;
      font-family: 'monospace', sans-serif;
   }
</style>
</head>
<body>
   <h1>Web Font</h1>
   <h2>Google Font</h2>
   <p>Using the Google Font (Lobster) by importing it.</p>
</body>
</html>
列印頁面
上一頁
下一頁
廣告