CSS 系統字型
如何在 CSS 中使用系統字型，以提升您的網站速度並為使用者提供更好的體驗和網頁載入時間 一點歷史 現在 網頁字型的影響 系統字型登場 著名的網站使用系統字型 我決定使用系統字型，給我程式碼 關於 system-ui 的一點說明 使用 @font-face 規則來使用字型變化 閱讀更多 一點歷史 多年來，網站只能使用所有電腦上可用的字型，例如 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 也決定使用系統字型。...