/

CSS字型

CSS字型

學習如何在CSS中使用字型

在Web的黎明時期，你只能選擇少數幾種字型。

幸運的是，如今你可以在你的網頁上載入任何種類的字型。

CSS在字型方面在多年來獲得了許多不錯的功能。

font屬性是一些屬性的縮寫：

  • font-family
  • font-weight
  • font-stretch
  • font-style
  • font-size

讓我們逐一介紹它們，然後再討論font。

接著，我們將討論如何載入自訂字型，可以使用@import或@font-face，或通過載入字型樣式表來載入。

font-family

設置元素將使用的字型家族。

為什麼是”家族”? 因為我們所了解的字型實際上是由幾個子字型組成的，這些子字型提供了我們所需要的所有樣式（粗體、斜體、輕鬆等）。

這是我Mac上的Font Book應用程式中的一個示例 - Fira Code字型家族下面有幾個專用字型：

這個屬性讓你可以選擇特定的字型，例如：

1
2
3
body {
    font-family: Helvetica;
}

你可以設置多個值，所以如果第一個值由於某些原因不能使用（例如在機器上找不到或下載字型的網絡連接失敗），則使用第二個值：

1
2
3
body {
    font-family: Helvetica, Arial;
}

到目前為止，我使用了一些特定的字型，我們稱之為Web安全字型，因為它們預安裝在不同的操作系統中。

我們將它們分成有衬线字体、无衬线字体和等宽字体。以下是一些最受歡迎的列表：

有衬线字体

  • Georgia
  • Palatino
  • Times New Roman
  • Times

无衬线字体

  • Arial
  • Helvetica
  • Verdana
  • Geneva
  • Tahoma
  • Lucida Grande
  • Impact
  • Trebuchet MS
  • Arial Black

等宽字体

  • Courier New
  • Courier
  • Lucida Console
  • Monaco

你可以將所有這些用作font-family屬性，但是不能保證它們在每個系統上都存在。還有其他的字体，对于它们的支持程度各不相同。

你也可以使用通用名称：

  • sans-serif 无衬线字体
  • serif 有衬线字体
  • monospace 等宽字体
  • cursive 用于模拟手写文本
  • fantasy 名字中已经说明了一切

通常在font-family定义的末尾使用这些通用名称，以提供后备值，以防止无法应用其他样式：

1
2
3
body {
    font-family: Helvetica, Arial, sans-serif;
}

font-weight

此屬性設置字型的宽度。你可以使用以下預定義的值：

  • normal 正常字体
  • bold 粗體字体
  • bolder （相对于父元素）更粗一点
  • lighter （相对于父元素）更细一点

或使用數字關鍵字：

  • 100
  • 200
  • 300
  • 400，映射為normal
  • 500
  • 600
  • 700，映射為bold
  • 800
  • 900

其中100是最輕的字型，900是最粗的。

一些數字值可能不映射到字型，因為字型必須在字型家族中提供。當缺失字型時，CSS使該數字至少與前一個字型一樣粗，所以你可能會有指向同一字型的數字。

font-stretch

如果可用，允许选择字型的窄或宽面。

這一點很重要：字型必須配備不同的面向。

允许的值从较窄到较宽：

  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded

font-style

允許你对字体應用斜體方式：

1
2
3
p {
    font-style: italic;
}

此屬性還允許使用oblique和normal這兩個值。使用italic和oblique之間幾乎沒有差異，對我來說第一個更容易，因為HTML已經提供了一個i元素，表示斜體。

font-size

此屬性用於確定字型的大小。

你可以傳遞兩種類型的值：

  1. 長度值，例如px、em、rem等等，或百分比
  2. 預定義的值關鍵字

对于第二种情况，你可以使用以下值：

  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller （相对于父元素）
  • larger （相对于父元素）

使用方法：

1
2
3
4
5
6
7
p {
    font-size: 20px;
}

li {
    font-size: medium;
}

font-variant

此屬性最初用於將文本更改為小寫字母，它只有3個有效的值：

  • normal
  • inherit
  • small-caps

小寫字母表示文本在其大寫字母旁邊以“更小的大寫字母”呈現。

font

font屬性使你可以在一個屬性中應用不同的字型屬性，從而減少雜亂。

我們至少必須設置2個屬性，font-size和font-family，其他屬性是可選的：

1
2
3
body {
    font: 20px Helvetica;
}

如果我們添加其他屬性，它們需要按照正確的順序放置。

這是正確的順序：

1
font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

示例：

1
2
3
4
5
6
7
body {
    font: italic bold 20px Helvetica;
}

section {
    font: small-caps bold 20px Helvetica;
}

使用@font-face加载自定义字型

@font-face允许你添加一個新的字型家族名稱，並將其映射到保存字型的文件。

這個字型將由瀏覽器下載並在頁面中使用，這對Web上的排版產生了重大變革-現在我們可以使用任何我們想要的字型。

我們可以將@font-face聲明直接添加到我們的CSS中，或者鏈接到專門用於導入字型的CSS文件。

在我們的CSS文件中，我們也可以使用@import來加載該CSS文件。

@font-face聲明包含了我們用來定義字型的幾個屬性，包括src，指向字型的URI（一個或多個URI）。這遵循同源策略，這意味著字型只能從當前源（域名+端口+協議）下載。

字型通常是以下格式：

  • woff（Web Open Font Format）
  • woff2（Web Open Font Format 2.0）
  • eot（Embedded Open Type）
  • otf（OpenType字型）
  • ttf（TrueType字型）

以下屬性允許我們定義要加載的字型的屬性，如前所述：

  • font-family
  • font-weight
  • font-style
  • font-stretch

關於性能的一點注意事項

當然，載入字型會對性能產生影響，這在創建頁面設計時必須考慮到。

tags: [“CSS”, “Fonts”, “Web Design”, “Typography”]