[分享] 網頁字型會影響網站載入速度？該用哪種網頁字體？
您知道嗎？網頁字型若使用「作業系統」以外的字型，由於中文網頁字型檔案太大，是會大大影響網頁載入速度的！
網頁字型是指網頁中使用的文字樣式。網頁字型通常會指定字體、顏色、大小和樣式（例如粗體或斜體），這些樣式可以讓網頁內容更加清晰和美觀，並且有助於提高用戶體驗。
一般來說，使用者看的網頁中的字體，會因為作業系統預設與瀏覽器設定而不同，比如說微軟正黑體；所以當你在設計網站時，也必須將網頁字型的相關問題納入考量，即便你在網站設計稿上用到了特殊中文字型，也沒辦法讓大家瀏覽網頁的時候也看到相同效果，畢竟他們電腦不一定有這套字型。
有一種非常不建議的方法，就是請工程師直接把字體檔案上傳到網站當中，但可能會違反字型授權；更重要的是，每次使用者瀏覽網頁的時候，都得重新下載一次這套字體，以繁體中文的字數來說，中文字體檔案非常龐大，一般字體大小是網頁的三倍以上，會讓網頁載入速度變慢，影響使用者體驗，可能還沒載完網站就不耐煩地把網站關掉了。
因此我們建議，如果是少量且非常特殊的字體，可以以圖片代替。
網頁字型設計必須認識的 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可以增加網頁設計的彈性和創意，讓設計者更能夠實現他們的設計理念，同時提供更豐富的使用者體驗。
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 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 思源黑體繁體中文
Sans是無襯線的意思，指的是黑體。一般網頁都可以使用黑體，帶有輕鬆大方的感覺，也易於閱讀。
Noto Serif Traditional Chinese 思源宋體繁體中文
Serif指的是襯線體，在字型筆畫的始末有一些裝飾細節。宋體相較於黑體來說，有嚴肅、認真的氛圍，可以依據您的網站性質、品牌形象選擇使用的字體。
特殊網路字型 Webfont
justfont 為目前最大的中文 webfont 服務商， 2012年，他們推出了 justfont 中文雲端字型服務，達成了中文字型也能應用於網頁的重要里程碑！justfont 是華文第一個推出「中文網路字型(web font)服務」的網站，專注於中文字型的服務，並在功能完整度、顯示速度以及字型品質上都非常要求。期許能讓網路設計師們，都能夠隨時瀏覽到高品質的字型。
justfont 對於網路字型的說明
網路字型(Web Font)主要用途在使用於網頁上的字型顯示，擺脫以往字型需安裝方能顯示的限制，使得於網頁設計上能夠不用轉圖檔，使用者一樣能夠看到特殊的字型效果。目前在英文語系國家，網路字型的使用甚為方便，但在亞洲語系國家則限制頗多，主要的困難點在於亞洲語系國家的字數太多，導致單一字型檔的大小，動輒5~6M，甚至有達到10M以上的字型檔案，要在瀏覽時下載整個字型檔是不現實的。網路字型機制，是依據您網頁上使用的文字，動態的產生並下載您需要的字型，所需下載的檔案大小等同於圖檔，且使用方便無須額外設定。
網路字型的好處就是，可以不需要下載全部的中文檔案，透過「網路字型」的機制，只下載網頁上所使用到的字即可，大幅的降低了所需下載檔案的大小。
有興趣的使用者可以參考 justfont 的 Webfont方案，主要採訂閱制，有免費試用，若確定訂閱則以年計費，僅能用於網頁中，webfont 僅能以 javascript 套用，無法下載字型安裝至電腦上使用。並以PVs（Page View） 計算網頁瀏覽次數，代表這個方案可以使用多少個網頁瀏覽次數，每頁不論使用多少字體數量，都以 1PV 計算，例如：假如你的網站平均一個訪客會瀏覽 2 個頁面的話，那 100,000 PVs 就可以提供給⋯⋯100,000/2 = 50,000 個訪客使用。
更多內容請看好看圖文版：https://rab.tw/web-font-and-website-speed/
