網頁字型會影響網站載入速度?該用哪種網頁字體?

您知道嗎?網頁字型若使用「作業系統」以外的字型,由於中文網頁字型檔案太大,是會大大影響網頁載入速度的!

目錄

flying laptop mobile tablet 3d rendering showing builder website responsive web design

網頁字型是指網頁中使用的文字樣式。網頁字型通常會指定字體、顏色、大小和樣式(例如粗體或斜體),這些樣式可以讓網頁內容更加清晰和美觀,並且有助於提高用戶體驗。

一般來說,使用者看的網頁中的字體,會因為作業系統預設瀏覽器設定而不同,比如說微軟正黑體;所以當你在設計網站時,也必須將網頁字型的相關問題納入考量,即便你在網站設計稿上用到了特殊中文字型,也沒辦法讓大家瀏覽網頁的時候也看到相同效果,畢竟他們電腦不一定有這套字型。

有一種非常不建議的方法,就是請工程師直接把字體檔案上傳到網站當中,但可能會違反字型授權;更重要的是,每次使用者瀏覽網頁的時候,都得重新下載一次這套字體,以繁體中文的字數來說,中文字體檔案非常龐大,一般字體大小是網頁的三倍以上,會讓網頁載入速度變慢,影響使用者體驗,可能還沒載完網站就不耐煩地把網站關掉了。

因此我們建議,如果是少量且非常特殊的字體,可以以圖片代替。

網頁字型設計必須認識的 Webfont

Webfont是一種用於網頁設計的字型檔案格式,可以讓網頁設計者在其網站上使用非標準的字型。在網頁中 Webfont 的使用方式,主要是由 W3C 協會所制定。如同 W3C 協會制定了在網頁上的樣式(CSS)呈現,W3C 協會也制定了網頁上字體套用 CSS 後的呈現規範。

一般來說,網頁瀏覽器只能顯示使用者電腦上已安裝的字型,這就限制了設計者的選擇。但是,透過使用Webfont,字型存放於網路平台上,設計者可以將自定義的字型嵌入到網頁中,使得在使用者電腦上沒有安裝這些字型的情況下,網頁仍能正常顯示。

Webfont的常見格式包括TrueType(.ttf)、OpenType(.otf)、WOFF(Web Open Font Format)、WOFF2(Web Open Font Format 2)等。這些格式經過優化,能夠在網頁上快速載入,並且通常具有良好的跨瀏覽器和跨裝置的相容性

使用Webfont可以增加網頁設計的彈性和創意,讓設計者更能夠實現他們的設計理念,同時提供更豐富的使用者體驗。

免費和開源的Webfont:Google Fonts

網頁字型
Google Fonts

Google Fonts(以前稱為 Google Web Fonts)是 Google 擁有的電腦字體和網站字體服務。這包括免費和開源字體系列,用於瀏覽器、網站中,以及透過 CSS 和 Android 使用字體的API。Google Fonts 存放在 Google 主機中,下載字體不需吃自己主機流量,Google 主機速度快。Google 字體庫中的流行字體包括Roboto、Open Sans、Lato、Oswald、Montserrat、Source Sans Pro和Raleway,近年也新增了一些中文、日文字體,提供中文網站使用者更多選擇。

而我們使用的網頁設計架站外掛 Elementor,在核心中就是使用 Google 字體,多達800多種的字體,可以任意使用,但當然大多數為英文字體。

網頁設計常用的字型:思源黑體、思源宋體

思源黑體與思源宋體是由 Adobe 與 Google 聯手開發的開源字型,中文命名取自飲水思源之意,支援字符數量極多,爾後 Google 以不同字重的方式將思源黑體以 Noto Sans CJK 名稱釋出。一般在缺字的時候會出現方框,因此缺字被戲稱為「豆腐」,而思源體的字型家族英文名稱為 Noto,即無豆腐之意,指創作者希望該字型不缺字,是最完善的字型。

由於 Google 和 Adobe 在創作思源體時是涵蓋了幾乎全世界地區的文字,TC 指的是 Traditional Chinese,因此你也可以找到對應的日文思源體、英文思源體、簡體中文思源體等等,非常全面。

中文網頁設計通常會使用Google 的開源字體:思源黑體Noto Sans TC思源宋體Noto Serif TC。這些字體是根據 Open Font License 獲得許可的,可以在您的產品和項目中使用它們——印刷或數字、商業或其他方式。

Noto Sans Traditional Chinese 思源黑體繁體中文

截圖 2022 08 12 下午4.25.29
Noto Sans TC

Sans是無襯線的意思,指的是黑體。一般網頁都可以使用黑體,帶有輕鬆大方的感覺,也易於閱讀。

Noto Serif Traditional Chinese 思源宋體繁體中文

截圖 2022 08 12 下午4.30.59
Noto Serif TC

Serif指的是襯線體,在字型筆畫的始末有一些裝飾細節。宋體相較於黑體來說,有嚴肅、認真的氛圍,可以依據您的網站性質、品牌形象選擇使用的字體。

特殊網路字型 Webfont

justfont 為目前最大的中文 webfont 服務商, 2012年,他們推出了 justfont 中文雲端字型服務,達成了中文字型也能應用於網頁的重要里程碑!justfont 是華文第一個推出「中文網路字型(web font)服務」的網站,專注於中文字型的服務,並在功能完整度、顯示速度以及字型品質上都非常要求。期許能讓網路設計師們,都能夠隨時瀏覽到高品質的字型。

justfont 對於網路字型的說明

網路字型(Web Font)主要用途在使用於網頁上的字型顯示,擺脫以往字型需安裝方能顯示的限制,使得於網頁設計上能夠不用轉圖檔,使用者一樣能夠看到特殊的字型效果。目前在英文語系國家,網路字型的使用甚為方便,但在亞洲語系國家則限制頗多,主要的困難點在於亞洲語系國家的字數太多,導致單一字型檔的大小,動輒5~6M,甚至有達到10M以上的字型檔案,要在瀏覽時下載整個字型檔是不現實的。網路字型機制,是依據您網頁上使用的文字,動態的產生並下載您需要的字型,所需下載的檔案大小等同於圖檔,且使用方便無須額外設定。
justfont webfont
justfont 提供的網路字型

網路字型的好處就是,可以不需要下載全部的中文檔案,透過「網路字型」的機制,只下載網頁上所使用到的字即可,大幅的降低了所需下載檔案的大小。

有興趣的使用者可以參考 justfont 的 Webfont方案,主要採訂閱制,有免費試用,若確定訂閱則以年計費,僅能用於網頁中,webfont 僅能以 javascript 套用,無法下載字型安裝至電腦上使用。並以PVs(Page View) 計算網頁瀏覽次數,代表這個方案可以使用多少個網頁瀏覽次數,每頁不論使用多少字體數量,都以 1PV 計算,例如:假如你的網站平均一個訪客會瀏覽 2 個頁面的話,那 100,000 PVs 就可以提供給⋯⋯100,000/2 = 50,000 個訪客使用。

怎麼嵌入特殊字型?

若您還是想在網站中嵌入特殊字型可以參考以下教學:

要在網頁中嵌入特殊字體,您需要使用 CSS 的 @font-face 規則。首先,您需要下載您想要使用的字體文件,並將其上傳到您的網站伺服器。然後,在您的 CSS 文件中,您可以使用 @font-face 規則定義字體的名稱、來源和其他樣式選項。例如,假設您下載了一個名為 “MyFont” 的字體文件,並且將其上傳到了您的網站的 “fonts” 目錄中,您可以使用以下 CSS 來定義字體:

@font-face {
  font-family: "MyFont";
  src: url("/fonts/MyFont.ttf") format("truetype");
}

或是在網頁的 HTML 源代碼中引用該字體文件,並在 CSS 樣式表中使用 font-family 屬性指定字體的名稱。

例如,假設你想在網頁中使用名為 “MyFont” 的字體,你可以在 HTML 源代碼中添加以下代碼來引用字體文件:

<link href="https://example.com/fonts/MyFont.ttf" rel="stylesheet">

然後,您就可以在其他 CSS 規則中使用這個字體了。例如,您可以使用以下 CSS 來指定所有標題元素(例如 <h1><h2> 等)使用這個字體:

h1, h2, h3, h4, h5, h6 {
  font-family: "MyFont", sans-serif;
}

請注意,上述示例只是示例代碼,實際情況可能會有所不同。此外,請確保在使用特殊字體時持有相應的授權。

網站字體也有順位?font-family 排序及示例

CSS 中的 font-family 的排序指的是網頁設計者指定的字體列表,按照順序列出了瀏覽器在查找字體時應該使用的字體。這些字體會被優先使用,直到瀏覽器找到一個可用的字體。如果網頁設計者列出的所有字體都不可用,瀏覽器將使用預設 Font Stack 中的第一個字體。因此,“font-family” 的排序是決定網頁顯示的字體的重要因素

Font Stack 是什麼?

Font Stack 是 CSS font-family的一個字體清單,以使用者滿意度來排序。Font Stack 支援網頁字體設定,因此無需透過電腦安裝。

font-family的規則

font-family 是 CSS 中的一個屬性,它用於指定網頁元素的字體。它的規則如下:

  1. 多個字體名稱可以作為一個字體系列指定給 “font-family”,瀏覽器將按照您列出的順序依次查找這些字體。
  2. 如果您指定的第一個字體無法使用,瀏覽器將使用下一個字體。這樣,您可以提供多個字體作為備選,以確保網頁在大多數瀏覽器上都能以您預期的方式顯示。
  3. 字體名稱必須用引號括起來,如果字體名稱包含空格,則必須使用引號。
p {
   font-family: Arial, "Helvetica Neue", sans-serif;
}

上面這段代碼將指定 “Arial” 字體作為首選字體,如果無法使用,則將使用 “Helvetica Neue”,如果再無法使用,則使用預設的 sans-serif 字體。

一般來說,字體順序的決定因網站設計者和技術平台而異,但通常情況下,系統字體(如Arial、Verdana等)會被放在前面,然後是網路字體,再是其他自訂字體。


在設計網站時,選擇適合的網頁字型確實會影響網站的載入速度,需要考慮的不只是美觀。使用Webfont可以讓設計者在網站中運用更多非標準字型,增加設計的彈性和創意,但同時也可能增加網站的載入時間。因此,在選擇網頁字型時,設計者需要在美觀和性能之間找到平衡點

如果您希望網站能夠快速載入並提供良好的用戶體驗,我們提供專業的網站速度優化服務。透過優化網站的代碼、圖像和其他資源,我們可以幫助您提高網站的載入速度,同時保持精美的設計和優質的內容。立即聯繫我們,讓我們一起打造更快速、更優秀的網站體驗吧!

延伸閱讀:

各種ChatGPT及AI工具應用、指令手冊、解決方案,每週更新。
學習最新AI工具,就上Learn AI
AI如何讓工作更輕鬆、更有效率?立刻學習!
LA廣告-1
LA廣告-2
LA廣告-3
Related Post
最新文章
google site:
Google 搜尋 site: 命令教學,精準搜尋特定網站

Google搜尋功能強大,但你知道如何限定搜尋範圍嗎?透過「site:」指令,你可以在指定的網站內進行搜尋,快速找到所需的資訊。這篇文章將帶你深入了解「site:」指令的用法,並提供實用的搜尋範例。

圖片優化、圖片格式
圖片優化新選擇!WebP、AVIF如何提升網站速度

網站圖片佔據了網頁的一大部分,圖片優化是提升網站速度的關鍵。傳統的 JPEG 和 PNG 格式雖然常見,但 WebP 和 AVIF 這兩種新興的圖片格式,在壓縮率和畫質上都有更出色的表現。本文將詳細介紹 WebP 和 AVIF 的特性、優缺點,並提供實用的優化技巧,幫助您打造一個快速、高效的網站。

Selected Post
精選文章
網站速度慢的5個原因
網站速度慢的5個原因

對於現在講求快速、即時的時代,若使用者開啟一個網站,網站速度非常慢,要等老半天,是不是會讓你想關掉網站,降低造訪意願呢?