就是愛尚生活 - 94i3 Life

 找回密碼
 免費註册

Sign in with facebook

Connect with friends.

人氣: 3817|回復: 0

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

  [複製鏈接]
字體大小: 正常 放大

新浪微博達人勛

總積分排名︰1
簽到
2124
鮮花(66) 雞蛋(2)
累計在線
338969分鐘
發表於 2018-7-10 17:12:51 | 顯示全部樓層 |閱讀模式
  
0.jpg
如果要說到一個網站新手;或是較缺乏設計經驗的工程師,所最容易忽略的網站要素,那大概就是網頁字體了,設定網頁字型並不難,但有一些規則你必須了解,才能完善的掌握你的網站的呈現方式。
設定網頁字體的三種方式一、使用系統內建字體
如果你覺得什麼都不設定就是使用系統內建字型的話,雖然也沒錯,但可能也會因此讓網站相當的沒有質感。系統內建字體中英文加起來可能有幾十種到百種,其中有比較適合應用在網頁上的,相反也會有不適合的,因此我們必須透過CSS的宣告來告知瀏覽器,「在我的網頁上,請使用這個字型!」瀏覽器就會遵照你的網站設定,去呈現該指定的字體給訪客。
指定字體的CSS
  1. <font face="Tahoma" size="4">font-family: '指定的字型‘;</font>
複製代碼
如果訪客沒有指定的字型呢?
對!這就是我們要考量進去的狀況,內建字體的「好處」就是由於是內建的,大家都有,但是別忘了系統還有分為Windows和Mac的系統,兩邊的內建字體是不同的,因此為了因應這個狀況,我們要指定「多個字體」,當第一個字體沒有的時候⋯⋯系統就會依照順位來找尋第二個字體:
內建字體指定建議
這是我常用的內建字體指定方式:
  1. <font face="Tahoma" size="4">font-family: "Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;</font>
複製代碼
實際使用時,可依照最適合你網站的狀況做調整,像是如果要用到簡體中文,可能用「微軟雅黑體」會比用正黑體來的好。
通常設定網頁字體時,會將「英文字體」在最前面順位、接著是MAC字體、Windows字體,原因是中文字體通常「包含」英文字體,因此假如你將中文字體放在順位前面,找到中文字體後,瀏覽器就不會再往下找其他指定字體了,這是設定時的一個小訣竅。
二、免費網路字體
免費的網路字體我都使用Google Fonts,上面有接近一千種的字體供大家挑選使用,但我們所關注的繁體中文字的部分選擇就不多了,甚至沒有被放在Google Fonts中,而是放在Google Fonts Early Access,目前可以選的也只有「Noto Sans 思源黑體」,但思源黑體就非常好用了!思源黑體字型漂亮、簡潔、易於閱讀,是一款優異的無襯線黑體,很適合在網頁上瀏覽,目前造九頑五全站使用的就是此字體。
Google提供的額外的中文字體
其實Google Fonts Early Access曾經是有提供「五款」繁中的字體的,不知道為什麼後來只留下了思源黑體(也許是黑體在網頁上的使用率遠大於其他),但是!只要你有當初Google所提供的字體接口的網址,依舊是可以使用其他四款中文字型的,這五款包含依然提供的思源黑體共是:
  • Noto Sans TC (Chinese Traditional) 黑體字體–思源黑體
  • cwTeXKai (Chinese Traditional) 楷體字體
  • cwTeXYen (Chinese Traditional) 圓體字體
  • cwTeXFangSong (Chinese Traditional) 仿宋體字體
  • cwTeXMing (Chinese Traditional) 明體字體

載入字體的網址各自為:
Noto Sans 思源黑體
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;
cwTeXKai 楷體字體
font-family: ‘cwTeXKai’, serif;
cwTeXYen 圓體字體
font-family: ‘cwTeXYen’, sans-serif;
cwTeXFangSong 仿宋體字體
font-family: ‘cwTeXFangSong’, serif;
cwTeXMing 明體字體
font-family: ‘Noto Sans TC’, sans-serif;
上述程式碼都是設定在css檔案中,import通常會寫在css中的最上方,在import字型檔案後,就可以使用font-family來指名使用字型。
使用中文字體需注意檔案大小
英文字體因為字數少,大小寫加起來才52個字,因此檔案小。但中文字體就不同,有上萬個中文字,依造字重——細體、正常、粗體——不同,更需要倍數的字數,因此一套中文字體檔案都不小,當你import在網頁中時,其實就是讓訪客到訪你的網站時,下載此套字體,確保訪客可以使用你指名的字體,但一套中文字體就要好幾MB,假如用個兩套可能第一次進你網站的訪客就要先下載超過10MB的檔案大小,不利網頁速度、也增加伺服器負擔及流量。
關於字體的速度影響可以參考此篇,最後面有測試將Google字體拿掉後的測試成績:WordPress優化神器!必裝的最強快取組合!
三、網路字型Web Font
最後要介紹的是像justfont這樣的雲端字體(Web Font)
網路字型(Web Font)主要用途在使用於網頁上的字型顯示,擺脫以往字型需安裝方能顯示的限制,使得於網頁設計上能夠不用轉圖檔,使用者一樣能夠看到特殊的字型效果。目前在英文語系國家,網路字型的使用甚為方便,但在亞洲語系國家則限制頗多,主要的困難點在於亞洲語系國家的字數太多,導致單一字型檔的大小,動輒5~6M,甚至有達到10M以上的字型檔案,要在瀏覽時下載整個字型檔是不現實的。網路字型機制,是依據您網頁上使用的文字,動態的產生並下載您需要的字型,所需下載的檔案大小等同於圖檔,且使用方便無須額外設定。 — form <just font> 關於網路字型的說明
可以看出網路字型的好處就是,可以不需要下載全部的中文檔案,而只需透過「網路字型」的機制,下載網頁上所使用到的字即可,大幅的降低了所需下載檔案的大小。
創造更多字體混搭的可玩性
其實在本網站一開始是嘗試使用宋體標題,搭配黑體內文的,但在測試後發現,檔案已經超過10MB,因此不得不折衷,全站統一使用黑體顯示,但如果使用如「just font」此類網路字體服務的話,因為檔案大小不大,就可以盡情的嘗試各種組合搭配,增加網頁的可看性!

網路字體使用方案

網路字體Web Font的計費方式是採用訂閱制的,PVs是PageView的意思,代表多這個方案可以使用多少個網頁瀏覽次數,例如:假如你的網站平均一個訪客會瀏覽三個頁面的話,那100,000PVs就可以提供給⋯⋯100,000/3 = 33,333個訪客使用。
因此可以先估算自己網站一年的使用人數,假如遠超過此數目的話,也有提供更高的PVs數的方案可以購買,而如果因為網站成長造成不到一年PVs就用光的話,也沒關係,服務商會發信給您,告知您需加購PVs,還有一點需要注意,假如是HTTPS的網站,那就一定要購買到最右邊的企業方案才可以使用。
因為網路字體需持續接受廠商的服務,串接廠商的字體檔案、依照頁面上的文字產生檔案的部分也是廠商提供的技術,因此訂閱制的服務很合理,並且訂閱期間可以使用的字體非常多元,其中有我認為最棒的中文「黑體」,信黑體可以使用!另外還有一款我很喜歡的中文字體「金萱體」,也可以使用!這些字體要買斷的話一套就得要好幾萬塊呢!
5.jpg
三種字體方式優缺點比較
內建字體
優點:無需下載任何字型檔案,檔案最小,頁面載入速度最快。
缺點:選擇性較少,無法統一使用者體驗(MAC和Windows、Android的使用者所看到的都不同),內建字體品質比不上自選字體,這點尤其在Windsows的使用者上更是明顯(windows內建的好看字體較少)
Google fonts
優點:免費、Google主機下載字體不需吃自己主機流量、Google主機速度快。
缺點:易造成頁面檔案肥大、只能選一款中文字體就是極限了,無法混搭。
網路字型 Web Font
優點:依照有使用到的中字生成檔案,檔案小、可搭配數款字體、付費字型品質高。
缺點:使用成本三者最高。

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


就是愛尚生活 - 94i3Life - 歡迎您 加入 !

回復 鮮花(66) 雞蛋(2)論壇版權

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免費註册 | 新浪微博登陸 Sign in with facebook

本版積分規則


快速回復 返回列表 聯繫我們 搜索

line|關于我們|聯絡我們|就是愛尚生活 - 94i3 Life |簡體中文

GMT+8, 2018-7-23 08:20 AM

Powered by 就是愛尚 - 94i3.tw - X3.2

© 2007-2018 愛上誠信。愛上精緻。愛上專業。愛上時尚。愛上分享

94i3就是愛尚是一個經驗分享筆記平台,網友均可以在94i3免費互相學習別人分享之經驗。
※本站只提供空間,網友自由發表使用,也請會員網友尊重「論壇規則」、「論壇注意事項」,本網站內容均從網路上收集或網友們提供,其內容及言論的完整性以及正確性並不代表本站立場,本站不負任何法律責任,均與本站無關。倘若文章、圖片或是內容言論等有任何問題,請「聯絡我們」,我們將會第一時間優先處理或刪除。

快速回復 返回頂部 返回列表