CSS字體

了解如何在CSS中使用字體

在網絡誕生之初,您只有少數幾種字體可以選擇。

值得慶幸的是,今天您可以在頁面上加載任何字體。

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

fontproperty是許多屬性的簡寫:

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

讓我們看一下其中的每個,然後我們將介紹font

然後,我們將討論如何使用@import或者@font-face,或加載字體樣式表。

font-family

設置字體家庭元素將使用的元素。

為什麼是“家庭”?因為我們所知道的字體實際上是由幾個子字體組成的。提供我們需要的所有樣式(粗體,斜體,淺色..)。

這是我的Mac的Font Book應用程序中的一個示例-Fira Code字體家族在下面託管了幾種專用字體:

此屬性使您可以選擇特定的字體,例如:

body {
  font-family: Helvetica;
}

您可以設置多個值,因此如果由於某種原因無法使用第一個選項(例如,在計算機上找不到該選項,或者下載字體的網絡連接失敗),則將使用第二個選項:

body {
  font-family: Helvetica, Arial;
}

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

我們將它們分為Serif,Sans-Serif和Monospace字體。以下是一些最受歡迎的列表:

襯線-喬治亞-Palatino-時代New Roman-時代

無襯線字體-Arial-Helvetica-Verdana-日內瓦-Tahoma-Lucida Grande-衝擊-Trebuchet MS-Arial Black

等寬空間-快遞-快遞-Lucida控制台-摩納哥

您可以將所有這些用作font-family屬性,但不能保證每個系統都有這些屬性。其他人也存在不同程度的支持。

您也可以使用通用名稱:

  • sans-serif沒有連字的字體
  • serif帶連字的字體
  • monospace一種特別適合代碼的字體
  • cursive用於模擬手寫作品
  • fantasy這個名字說明了一切

這些通常用在font-family定義,以提供後備值,以防其他情況無法應用:

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

font-weight

此屬性設置字體的寬度。您可以使用這些預定義的值:

  • 普通的
  • 大膽的
  • 粗體(相對於父元素)
  • 更輕(相對於父元素)

或使用數字關鍵字

  • 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

允許您將斜體樣式應用於字體:

p {
  font-style: italic;
}

此屬性還允許值obliquenormal。使用之間的差異很小,如果有的話italicoblique。第一個對我來說比較容易,因為HTML已經提供了i表示斜體的元素。

font-size

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

您可以傳遞2種值:

  1. 長度值,例如pxemrem等等,或一個百分比
  2. 預定義的值關鍵字

在第二種情況下,可以使用的值為:

  • xx小
  • 小的
  • 中等的
  • x大
  • xx大
  • 較小(相對於父元素)
  • 更大(相對於父元素)

用法:

p {
  font-size: 20px;
}

li { font-size: medium; }

font-variant

此屬性最初用於將文本更改為小寫,並且只有3個有效值:

  • normal
  • inherit
  • small-caps

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

font

font屬性可讓您在一個字體中應用不同的字體屬性,從而減少了混亂情況。

我們必須至少設置2個屬性,font-sizefont-family,其他是可選的:

body {
  font: 20px Helvetica;
}

如果我們添加其他屬性,則需要以正確的順序放置它們。

這是命令:

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

例子:

body {
  font: italic bold 20px Helvetica;
}

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

使用加載自定義字體@font-face

@font-face使您可以添加新的字體系列名稱,並將其映射到包含字體的文件。

該字體將由瀏覽器下載並在頁面中使用,這是對網絡排版的根本改變-我們現在可以使用所需的任何字體。

我們可以添加@font-face聲明直接添加到我們的CSS中,或鏈接到專用於導入字體的CSS。

在我們的CSS文件中,我們還可以使用@import加載該CSS文件。

一種@font-face聲明包含一些我們用來定義字體的屬性,包括src,即字體的URI(一個或多個URI)。這遵循同源策略,這意味著只能從當前源(域+端口+協議)下載字體。

字體通常採用以下格式

  • woff(網絡開放字體格式)
  • woff2(網絡開放字體格式2.0)
  • eot(嵌入式開放式)
  • otf(OpenType字體)
  • ttf(TrueType字體)

如下所示,以下屬性使我們能夠定義將要加載的字體的屬性:

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

性能說明

當然,加載字體會影響性能,在創建頁面設計時必須考慮這些影響。

免費下載我的CSS手冊


更多CSS教程: