blog image

網頁設計師忽略了的事情 - 中文字體

製作英文網頁時,設計師可以完美地搭配不同的英文字體在網頁上,但在中文網頁上,由於中文字體的字數實在太多和容量太大,不可能將整個字體放到網頁上,所以通常都會用上默認字體,這樣令到看上網頁時有種說不出的違和感,總是欠點什麼。
我們希望設計中文網頁時也可以使用中文字體(注意:此網頁已使用上思源字體),所以此網站就誕生了。我們致力於解決中文網頁的問題,以下會透過一個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. 在網頁上文字可以選取、複製、搜索,有利於搜尋引擎優化。
我們免費提供了在綫轉換Web Font,大家可以在自己的網頁試試加入中文字體。

發表評論
搜尋
分類
最新的文章
recent-blog image
隨峰體
recent-blog image
cjkFonts 手寫4
recent-blog image
cjkfonts 全瀨體
分享Blog