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

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

目錄

flying laptop mobile tablet 3d rendering showing builder website responsive web design
網頁字型學問大!會影響網站載入速度? 5

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

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

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

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

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

免費和開源的Webfont:Google Fonts

網頁字型
Google Fonts

Google Fonts(以前稱為Google Web Fonts)是 Google 擁有的電腦字體和網站字體服務。這包括免費和開源字體系列,用於瀏覽器、網站中,以及通過CSS和Android使用字體的API。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指的是襯線體,在字型筆畫的始末有一些裝飾細節。宋體相較於黑體來說,有嚴肅、認真的氛圍,可以依據您的網站性質、品牌形象選擇使用的字體。

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

延伸閱讀:

Share 分享 :

分享在 facebook
分享在 twitter
分享在 telegram
分享在 email
Related Post

最新文章