隨峰體
2020年5月29日
網頁設計師忽略了的事情 - 中文字體
製作英文網頁時，設計師可以完美地搭配不同的英文字體在網頁上，但在中文網頁上，由於中文字體的字數實在太多和容量太大，不可能將整個字體放到網頁上，所以通常都會用上默認字體，這樣令到看上網頁時有種說不出的違和感，總是欠點什麼。
我們希望設計中文網頁時也可以使用中文字體（注意：此網頁已使用上思源字體），所以此網站就誕生了。我們致力於解決中文網頁的問題，以下會透過一個Landing Page 講解一下使用默認字體及中文字體的分別。
Landing page 一般翻譯成「登陸頁面」、「銷售頁」、「著陸頁」或「到達頁」。訪客從流量管道 例如：Yahoo廣告、Facebook廣告、Google搜索等進來，能引導訪客到達你設定目標的網頁，就被稱做為 Landing Page (「登陸頁面」)。目的是要訪客有後續行動 例如：訂閱電子報、下載電子書、購買產品或註冊會員等。
為了吸引訪客繼續閱讀內文，Landing Page 通常有引人入勝的標題、吸引的描述、搭配適當的圖片、短片或動畫等，當完成排版設計 Landing Page 後，然後發現如果使用了特定字體， 網頁卻沒辦法在瀏覽器上顯示特定字體。
現在大多數的中文 Landing Page 都是使用瀏覽器上的默認字體，以往如果想使用特定的字體，都會將整個或部分的網頁做成圖片檔，每次修改內容也要同時修改圖片，還不利於搜索器SEO。
為了解決中文字體的問題，以下將會探討一下使用 中文 Web Font 解決的方法。
開源字體的出現後，再加上HTML5及CSS3技術創新，網絡速度提昇，解決了設計師多年來的中文字體困擾。
這裡預先製作了一個虛構的中文 Landing Page (圖.1)，這網頁是使用瀏覽器默認字體，不同的操作系統和瀏覽器，默認字體可能會不同。
示範鏈接 :
使用默認字體的 Landing Page使用 Web Font 的 Landing Page
(圖.1) 使用默認字體的 Landing Page
(圖.2)顯示了一些在不同的操作系統和瀏覽器上，默認字體的 中文 Landing Page 的效果圖。
(圖.3)是使用了中文 Web Font 的 Landing Page，不同的操作系統和瀏覽器，顯示的字體都是相同。
(圖.4)顯示了一些在不同的操作系統和瀏覽器上，使用了中文 Web Font 的 Landing Page 的效果圖。
使用中文 Web Font 的優點 :
1. 使用特定的字體，整體排版設計可以控製，顯示高質量的網頁。
2. 字體一致性，不同的操作系統和瀏覽器，顯示的字體都是相同，不需要擔心默認字體影響設計。
3. 不需要將含有特定的字體做成圖片檔。
4. 維護容易，可以迅速修改文字。
5. 中文字形可以任意更改顏色及大小。
6. 適合響應式網頁設計(電腦版和手機版)，透過CSS可以支援各種螢幕大小。
7. 在網頁上文字可以選取、複製、搜索，有利於搜尋引擎優化。
2. 字體一致性，不同的操作系統和瀏覽器，顯示的字體都是相同，不需要擔心默認字體影響設計。
3. 不需要將含有特定的字體做成圖片檔。
4. 維護容易，可以迅速修改文字。
5. 中文字形可以任意更改顏色及大小。
6. 適合響應式網頁設計(電腦版和手機版)，透過CSS可以支援各種螢幕大小。
7. 在網頁上文字可以選取、複製、搜索，有利於搜尋引擎優化。
我們免費提供了在綫轉換Web Font，大家可以在自己的網頁試試加入中文字體。
發表評論