網頁字型學問大!會影響網站載入速度?

本文開頭讓我們直切重點:網頁字型若使用「作業系統」以外的字型,由於中文網頁字型檔案太大,是會影響網頁載入速度的!

目錄

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

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

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

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

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

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

Webfont 為網頁上替換字型的服務,在網頁中Webfont的使用方式,主要是由W3C協會所制定。如同W3C協會制定了在網頁上的樣式(CSS)呈現,W3C協會也制定了網頁上字體套用CSS後的呈現規範。字型需要存放於網路平台上,否則網頁僅能讀取本地端的字型檔。雖然有安裝字型檔的裝置可以看到網頁上指定的字型,但是沒有安裝該字型檔的裝置卻是無法呈現,這個網頁呈現結果則會跳回裝置上預設的系統字型。

免費和開源的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等)會被放在前面,然後是網路字體,再是其他自訂字體。

網頁字型設計需要考慮的不只是美觀,更要考慮到對網站速度的影響喲!

延伸閱讀:

各種ChatGPT及AI工具應用、指令手冊、解決方案,每週更新。
學習最新AI工具,就上Learn AI
AI如何讓工作更輕鬆、更有效率?立刻學習!
LA廣告-1
LA廣告-2
LA廣告-3

Share 分享 :

Related Post

最新文章

SEO文章

如何使用SEO文章來行銷並吸引更多流量?

對於想要在網路世界脫穎而出的人來說,了解SEO的基礎和撰寫相應的文章是至關重要的。撰寫、發布和分享精彩的SEO文章,以吸引更多用戶並增加網站流量,以下是實現這一目標的建議及步驟。

聯盟行銷網站

啟動你的聯盟行銷旅程:從了解到實踐

對於那些對聯盟行銷一無所知的人,這是開啟一個新世界的大門。了解聯盟行銷不僅是市場經濟的一部分,更是開展事業的獨特方式。本文將為你提供從了解聯盟行銷基本概念到實際架設網站的指南。

社群、社群圖文

最新!社群圖文尺寸全整理+靈感包

社群圖文,它代表著一種強大的資訊表達方式。對於那些希望在網路世界中建立形象與推廣服務的人來說,瞭解並善用社群圖文至關重要。我們還整理了社群圖片尺寸大全,快存起來!

Selected Post

精選文章

HTTP 301、302轉址的差異

HTTP 301與302網站轉址的差異及SEO

HTTP 301與302轉址常常搞得你一團亂嗎?還是你根本不知道這是什麼?什麼時候該使用轉址?更重要的是,其實他們對你的網站的SEO也有很大的影響。

網頁設計該知道的6件事

6 個關於網頁設計的重要事項

在這個不斷變化的網絡時代,網頁設計也經歷了巨大的變革。在開始或進行網站設計之前,有哪些重要事項值得了解呢?讓我們分享給您!

RWD網站優缺點

響應式RWD網站的 7 個優點與 4 個缺點

架設響應式RWD網站不僅不需額外製作行動版網站,而且在維護網站上更加方便。本文將為您詳細列舉 11 個RWD網站的優缺點,讓您全面比較,並深入了解RWD網站的特點與優勢。

SSL憑證

SSL憑證是什麼?對網站的SEO其實有大影響?

SSL(Secure Sockets Layer),也就是安全資料傳輸層憑證,是網頁伺服器與瀏覽器之間的加密通信安全技術,確保您的網站資料不容易被攔截。但它對於網站的SEO又有什麼影響呢?我們將解釋這個重要的議題,讓您更了解SSL憑證的作用。