做出高質感網站，必須知道的網頁字體應用

網站新手、缺乏設計經驗的工程師，最容易忽略的就是設定網頁字體。

免費字體可以使用Google Fonts，透過CSS 設定。

思源黑體漂亮、簡潔易於閱讀， ... 從零開始的架設網站教學[起手式]主機架設WordPress網站—————-下面按網站目的選一個教學—————-[部落客]高顏值免費BLOG主題Ashe&Pro[部落客]速度為上！免費輕量部落格！Astra[官方網站]企業、個人官網byElementor[官方網站]企業、個人官網byDiviWordPressWordPress教學網站經營策略主機伺服器網站設計須知SEO短筆記WordPress免費教學資源.WordPress學習網網頁設計服務WordPress主機Youtube頻道部落格Divi網站快速架首頁>WordPress>WordPress教學>做出高質感網站，必須知道的網頁字體應用做出高質感網站，必須知道的網頁字體應用By黃裕二2018年05月10日星期四最後更新時間： 2021年12月24日|WordPressWordPress教學網站設計精選網頁技術趨勢如果要說到一個網站新手；或是較缺乏設計經驗的工程師，最容易忽略的網站要素，那大概就是網頁字體了，設定網頁字型並不難，但有一些規則你必須了解，才能完善的掌握網站的呈現方式。

 以下介紹設定網頁字體的三種方式：使用系統內建字體如果你覺得什麼都不設定就是使用系統內建字型的話，雖然也沒錯，但可能也會因此讓網站相當的沒有質感。

系統內建字體中英文加起來可能有幾十種到百種，其中有比較適合應用在網頁上的，相反也會有不適合的，因此我們必須透過CSS的宣告來告知瀏覽器，「在我的網頁上，請使用這個字型！」瀏覽器就會遵照你的網站設定，去呈現該指定的字體給訪客。

指定字體的CSS語法：font-family:'指定的字型‘;如果訪客沒有指定的字型呢？對！這就是我們要考量進去的狀況，內建字體的「好處」就是由於是內建的，大家都有，但是別忘了系統還有分為Windows和Mac的系統，兩邊的內建字體是不同的，因此為了因應這個狀況，我們要指定「多個字體」，當第一個字體沒有的時候⋯⋯系統就會依照順位來找尋第二個字體：內建字體指定建議這是我常用的內建字體指定方式：font-family: "Helvetica","Arial","LiHeiPro","黑體-繁","微軟正黑體",sans-serif;實際使用時，可依照最適合你網站的狀況做調整，像是如果要用到簡體中文，可能用「微軟雅黑體」會比用正黑體來的好。

 通常設定網頁字體時，會將「英文字體」在最前面順位、接著是MAC字體、Windows字體，原因是中文字體通常「包含」英文字體，因此假如你將中文字體放在順位前面，找到中文字體後，瀏覽器就不會再往下找其他指定字體了，這是設定時的一個小訣竅。

免費網路字體免費的網路字體我都使用GoogleFonts，上面有接近一千種的字體供大家挑選使用，但我們所關注的繁體中文字的部分選擇就不多了，甚至沒有被放在GoogleFonts中，而是放在GoogleFontsEarlyAccess，目前可以選的也只有「NotoSans思源黑體」，但思源黑體就非常好用了！思源黑體字型漂亮、簡潔、易於閱讀，是一款優異的無襯線黑體，很適合在網頁上瀏覽，目前造九頑五全站使用的就是此字體。

Google提供的額外的中文字體其實GoogleFontsEarlyAccess曾經是有提供「五款」繁中的字體的，不知道為什麼後來只留下了思源黑體(也許是黑體在網頁上的使用率遠大於其他)，但是！只要你有當初Google所提供的字體接口的網址，依舊是可以使用其他四款中文字型的，這五款包含依然提供的思源黑體共是：NotoSansTC(ChineseTraditional)黑體字體–思源黑體cwTeXKai(ChineseTraditional)楷體字體cwTeXYen(ChineseTraditional)圓體字體cwTeXFangSong(ChineseTraditional)仿宋體字體cwTeXMing(ChineseTraditional)明體字體載入字體的網址以及設定的語法各為： 只要將下列CSS語法貼在你的網站中，就可以使用font-family來指名使用該字型。

如果不會設定的朋友請看這篇：簡單有用的WordPress網頁字體修改方法NotoSans思源黑體@importurl(//fonts.googleapis.com/earlyaccess/notosanstc.css); body{ font-family:'NotoSansTC',sans-serif!important; }cwTeXKai楷體字體@importurl(https://fonts.googleapis.com/earlyaccess/cwtexkai.css); body{ font-family:‘cwTeXKai’,serif; }cwTeXYen 圓體字體@importurl(https://fonts.googleapis.com/earlyaccess/cwtexyen.css); body{ font-family:‘cwTeXYen’,sans-serif; }cwTeXFangSong仿宋體字體@importurl(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css); body{ font-family:‘cwTeXFangSong’,serif; }cwTeXMing明體字體@importurl(https://fonts.googleapis.com/earlyaccess/notosanstc.css); body{ font-family:‘NotoSansTC’,sans-serif; }融入前面所學字體優先級的概念：指定多個字體以上程式碼皆只單獨指定該字體，可照文章一開始的概念，自行在前後加入優先讀取字體順序如：@importurl(//fonts.googleapis.com/earlyaccess/notosanstc.css); body{ font-family: 'Helvetica','Arial','NotoSansTC','黑體-繁','微軟正黑體',sans-serif!important; }（以加入思源黑體並將英文保留用原本系統內建的好看字體，並在出錯讀不到思源黑體時讀取內建好看黑體為例）2021更新NotoSans思源黑體、思源宋體的正式網址earlyaccess的字體檔案大小都特別大，雖然還是可以用，但多少會影響一點網站速度，幸好Google後來提供了正式版的「思源黑體」和「思源宋體」中文字型的網址，檔案大小都比本來小了50%左右！是不是很棒！如果已經有加入思源黑體的朋友，也趕快置換一下引入網址吧，只要將本來的程式碼換成下面： NotoSans思源黑體(正式版)@importurl("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap") body{ font-family:'NotoSansTC',sans-serif!important; }NotoSans思源宋體(正式版)@importurl(https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap") body{ font-family:'NotoSerifTC',serif; }其他字體沒有正式版嗎？很遺憾的是，正式版只剩下黑體和宋體，如果要用其他的還是得用earlyaccess的版本，剩下的這兩個是最好用的，黑體自然不用說，宋體則是有「襯線」的好用選擇，假設你的網站想營造一點文青的風味，都使用黑體有點無趣，試著把一些大標題改為「宋體」也是個不錯的配置方式喔！正式版多了swap的功能有發現引入網址的最後面加上了display=swap嗎？這是讓字型遇到網路比較慢的狀況未能即時下載時，可以先顯示內建的字體，不至於讓網站有空白的空窗期。

使用中文字體需注意檔案大小英文字體因為字數少，大小寫加起來才52個字，因此檔案小。

但中文字體就不同，有上萬個中文字，依造字重——細體、正常、粗體——不同，更需要倍數的字數，因此一套中文字體檔案都不小，當你import引入在自己網站中使用，其實就是讓訪客到訪你的網站時，下載此套字體，確保訪客可以使用你指名的字體，但一套中文字體就要好幾MB，假如用個兩套可能第一次進你網站的訪客就要先下載超過10MB的檔案大小，不利網頁速度、也增加伺服器負擔及流量。

正式版的部份因為大幅減少字體大小，假如要用到黑體+宋體，也是勉強可行的。

關於字體的速度影響可以參考此篇，最後面有測試將Google字體拿掉後的測試成績：WordPress優化神器！必裝的最強快取組合！網路字型WebFont最後要介紹的是像justfont這樣的雲端字體(WebFont)網路字型(WebFont)主要用途在使用於網頁上的字型顯示，擺脫以往字型需安裝方能顯示的限制，使得於網頁設計上能夠不用轉圖檔，使用者一樣能夠看到特殊的字型效果。

目前在英文語系國家，網路字型的使用甚為方便，但在亞洲語系國家則限制頗多，主要的困難點在於亞洲語系國家的字數太多，導致單一字型檔的大小，動輒5~6M，甚至有達到10M以上的字型檔案，要在瀏覽時下載整個字型檔是不現實的。

網路字型機制，是依據您網頁上使用的文字，動態的產生並下載您需要的字型，所需下載的檔案大小等同於圖檔，且使用方便無須額外設定。

—form關於網路字型的說明可以看出網路字型的好處就是，可以不需要下載全部的中文檔案，而只需透過「網路字型」的機制，下載網頁上所使用到的字即可，大幅的降低了所需下載檔案的大小。

創造更多字體混搭的可玩性其實在本網站一開始是嘗試使用宋體標題，搭配黑體內文的，但在測試後發現，檔案已經超過10MB，因此不得不折衷，全站統一使用黑體顯示，但如果使用如「justfont」此類網路字體服務的話，因為檔案大小不大，就可以盡情的嘗試各種組合搭配，增加網頁的可看性！ 網路字體使用方案 網路字體WebFont的計費方式是採用訂閱制的，PVs是PageView的意思，代表多這個方案可以使用多少個網頁瀏覽次數，例如：假如你的網站平均一個訪客會瀏覽三個頁面的話，那100,000PVs就可以提供給⋯⋯100,000/3=33,333個訪客使用。

因此可以先估算自己網站一年的使用人數，假如遠超過此數目的話，也有提供更高的PVs數的方案可以購買，而如果因為網站成長造成不到一年PVs就用光的話，也沒關係，服務商會發信給您，告知您需加購PVs，還有一點需要注意，假如是HTTPS的網站，那就一定要購買到最右邊的企業方案才可以使用。

因為網路字體需持續接受廠商的服務，串接廠商的字體檔案、依照頁面上的文字產生檔案的部分也是廠商提供的技術，因此訂閱制的服務很合理，並且訂閱期間可以使用的字體非常多元，其中有我認為最棒的中文「黑體」，信黑體可以使用！另外還有一款我很喜歡的中文字體「金萱體」，也可以使用！這些字體要買斷的話一套就得要好幾萬塊呢！結論：三種字體方式優缺點比較系統內建字體優點：無需下載任何字型檔案，檔案最小，頁面載入速度最快。

缺點：選擇性較少，無法統一使用者體驗(MAC和Windows、Android的使用者所看到的都不同)，內建字體品質比不上自選字體，這點尤其在Windsows的使用者上更是明顯(windows內建的好看字體較少)Googlefonts優點：免費、Google主機下載字體不需吃自己主機流量、Google主機速度快。

缺點：易造成頁面檔案肥大、只能選一款中文字體就是極限了，無法混搭。

網路字型WebFont優點：依照有使用到的中字生成檔案，檔案小、可搭配數款字體、付費字型品質高。

缺點：使用成本三者最高。

檔案(影響頁面載入速度)可選擇字體(影響頁面豐富與質感)成本(影響你的錢包厚度)內建字體 無需下載額外檔案 只可選擇各系統內建 無GoogleFonts 大 中文字體少、但品質優良 免費WebFont 小 多、品質高 依網站使用量選擇方案沒有哪種方式一定最好，要看你的網站追求的是什麼，如果「速度」是你的網站最重要的使用者體驗，那麼完全不需要任何額外下載的內建字體可能是你最佳選擇，但要記得為每個系統指定好適當的字體，如果希望能搭配多款中文以及追求高質感的中文字型，那麼網路字型WebFont可能是你的最佳選擇，而GoogleFonts雖然檔案最大，但憑藉著Google的伺服器速度，其實下載也不會太差，但可搭配的中文字型不多，是另外兩個方案中折衷的一個方式。

 你可能也有興趣上一篇SEO優化趨勢觀察作弊退散內容為王下一篇有Facebook粉絲專頁，還需要經營網站嗎？相關文章三年網站經營紀錄：流量的天花板你該要懂的簡單設計：有了美感、世界開始有了質感修改WordPress網頁字型好Easy！網頁質感UP大提升！網站經營兩年心得、經驗分享有Facebook粉絲專頁，還需要經營網站嗎？SEO優化趨勢觀察作弊退散內容為王WordPress優化神器！必裝的最強快取組合！WP架站教學WordPress架站全攻略網站從無到有完整教學清單指南WordPress中文教學網造九推廣方案知無不言、言無不答！有用知識在這裏！知無不言、言無不答！有用知識在這裏！