/

CSS 系統字型

CSS 系統字型

如何在 CSS 中使用系統字型，以提升您的網站速度並為使用者提供更好的體驗和網頁載入時間

一點歷史

多年來，網站只能使用所有電腦上可用的字型，例如 Georgia、Verdana、Arial、Helvetica、Times New Roman。其他字型無法保證在所有網站上運作。

如果你想使用花俏的字型，你就得使用圖片。

在 2008 年，Safari 和 Firefox 引入了 @font-face CSS 屬性，線上服務開始提供 Web 字型的授權。第一個是 2009 年的 Typekit，後來由於免費提供，Google Fonts 變得非常受歡迎。

@font-face 在所有主要瀏覽器上實現，現在是現代設備的標準功能。如果你是年輕的網頁開發者，你可能沒有意識到，在 2012 年我們仍然有文章解釋這種新的 Web 字型技術。

現在

現在你可以使用任何你想使用的字型，無論是依賴於像 Google Fonts 這樣的服務，還是提供自己的字型進行下載。

你可以這麼做，但你應該這麼做嗎？

如果你有選擇的權利（這意味著你不是在實現客戶提供的設計），你可能會想好好考慮一下，回歸到基本（但仍具有風格！）。

網頁字型的影響

在你的網頁上載入的每個內容都有一個成本。這個成本在移動設備上特別明顯，因為你所需的每個位元組都會影響載入時間和使用者消耗的頻寬量。

在內容渲染之前，字型必須被載入，因此您需要在用戶能夠閱讀您所寫的任何單詞之前等待該資源載入完成。

但網頁字型是提供出色的用戶體驗的一種方式，通過良好的排版。

系統字型登場

作業系統具有優秀的預設字型。

系統字型具有速度和性能上的優勢，而且能夠減少網頁大小。

但是，它們讓您的網站對任何查看該網站的人來說都非常熟悉，因為他們每天都在使用自己的電腦或移動設備上看到相同的字型。

它實際上就是一種原生字型。

由於它是系統字型，所以保證看起來很棒。

著名的網站使用系統字型

您可能知道其中一些著名的網站，例如：

  • GitHub
  • Medium
  • Ghost
  • Bootstrap
  • Booking.com

他們多年來一直使用系統字型。

甚至 WordPress 控制台 - 用於運行數百萬個網站的平台 - 也使用系統字型，而以閱讀為主的 Medium 也決定使用系統字型。

如果這對他們有效，那麼對您也一樣有效。

我決定使用系統字型，給我程式碼

這是您應該添加到您的網站的 CSS 行：

1
2
3
4
body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
 "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}

瀏覽器將解析所有這些字型名稱，並從第一個開始檢查它是否可用。

macOS 上的 Safari 和 Firefox 使用 -apple-system，新版本使用 San Francisco 字型，舊版本使用 Helvetica Neue 和 Lucida Grande 字型。

Chrome 使用 BlinkMacSystemFont，該字型默認為操作系統字型（同樣，在 macOS 上為 San Francisco 字型）。

現代的 Windows 系統和 Windows Phone 使用 Segoe UI 字型，Windows XP 使用 Tahoma 字型，Android 使用 Roboto 字型等等，以便為其他平台定製字型。

Arial 和 sans-serif 是備用字型。

如果您的網站中使用了Emoji，請確保也載入相應的符號字型：

1
2
3
4
5
body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
 "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
 "Segoe UI Emoji", "Segoe UI Symbol";
}

根據您的網站使用統計，您可能需要更改字型出現的順序。

關於 system-ui 的一點說明

也許您在網上的系統字型文章中會看到提到 system-ui，但目前已知在 Windows 系統中會引起問題（參見https://infinnie.github.io/blog/2017/systemui.html 和 https://github.com/twbs/bootstrap/pull/22377）。

正在進行工作以將 system-ui 標準化為通用的字型系列，所以在將來，您只需編寫：

1
2
3
body {
 font-family: system-ui;
}

查看 https://www.chromestatus.com/feature/5640395337760768 和 https://caniuse.com/#feat=font-family-system-ui 以保持關注進展。Chrome 和 Safari 已經支援它，Firefox 部分支援，而 Edge 尚未實現。

使用 @font-face 規則來使用字型變化

上述的方法很好，直到您需要在第二個元素上更改字型，甚至可能在多個元素上更改字型。

也許您希望以 font 屬性而不是 font-style 屬性指定斜體，或者設置特定的字型粗細。

Jonathan Neal 的這個項目 https://jonathantneal.github.io/system-font-css/ 讓您可以使用系統字型，只需導入一個模塊，並且您可以設置：

1
2
3
body {
 font-family: system-ui;
}

system-ui 在 https://github.com/jonathantneal/system-font-css/blob/gh-pages/system-font.css 中有定義。

現在，您可以通過引用以下方式使用不同的字型變化：

1
2
3
4
5
6
7
.special-text {
 font: italic 300 system-ui;
}

p {
 font: 400 system-ui;
}

閱讀更多

tags: [“CSS”, “fonts”, “web development”]