National Yang-Ming University + 886 2 2826 7391

設定中文網路字型

Last Updated: 28 January 2014

網路字型 (web fonts) 一般指的是網頁設計者在網頁中,利用 Javascript 指定特殊的字型。而瀏覽該網頁的瀏覽器,利用該 Javascript,在瀏覽的當下連結到網路字型供應商的網站,即時下載該網頁會用到的字符 (glyph)。優點是在中文應用上可以避免預先下載 5MB 以上的完整字型檔,網頁設計者可以在同一網頁中運用多種字體,而且確保瀏覽者看到的是你想他看到的字體。缺點是每一個瀏覽該網頁的瀏覽器,都要外連到商業網路字型供應商,而這些供應商多半都依照流量和使用字型多寡收費。

中文網路字型目前有以下兩家:justfont.com文鼎網路字型。根據我粗淺的測試,直到 2014 年一月,兩家公司的解決方案都令人不滿意。請參見使用心得

以下分別簡介利用 justfont.com文鼎 設定中文網路字型


  1. 按照 justfont.com 的使用說明,產生等一下要內嵌到 index.php 的 Javascript 程式碼
  2. 最簡單的應用,直接把剛才那段 Javascript 貼到網頁 HTML 程式碼。以下是範例。a simple HTML using web fonts網路字型應用範例網路字型應用範例
  3. 如果你是在 Joomla! 網站中編輯網頁文章,Javascript 不能貼在個別文章,而要貼在目前使用的 Joomla! template 的 index.php。webfont1必須在 template manager 修改 PHP 原始碼修改 index.php修改 index.php貼上 Javascript強迫 Justfont 要等到中文字體載入完畢才先顯示強迫 Justfont 要等到中文字體載入完畢才顯示
  4. 建立新文章參考此範例  使用 CSS 來指定中文網路字型使用 CSS 來指定中文網路字型
  5. 結果大概像這樣:顯示結果顯示結果

 


 

文鼎網路字型

  1. 一樣先在網站建立帳號
  2. 設定你要用的中文字型和 CSS element 設定中文字體設定中文字體
  3. 產生 Javascript Arphic Webfonts2產生 Javascript
  4. 貼入你要使用的 HTML 原始碼 Arphic Webfonts3貼入 HTML 原始碼
  5. 結果示範 Arphic Webfonts4結果示範

使用心得

Justfont.com

justfont 的網路主機和頻寬非常不穩定。我已經付費購買正式會員,結果字型有時候顯示的出來,有時候顯示不出來。一個網路穩定性很差的網路字型,你再誇口字型本身多漂亮又有什麼用?

更令人不滿的是連該公司會員帳號主機,有時候都很難登入,整個網站上又找不到服務支援的電子郵件信箱,只有一個某經理個人郵件。不禁讓人懷疑他是不是全部服務都放在同一台電腦上,而且公司只有經理一個員工?

不過所幸經理對客服回應速度很快,宣稱他們公司正和 Pixnet 合作,所以網路穩定性不佳。並且很快就處理退費申請。顯然個人客戶不在該公司的業務重點。 

文鼎網路字型

直接用範例來說明。套用網路字型之後,不知道為什麼行距變得比正常字型來的小,導致文章排版效果非常詭異。
arphic example套用文鼎網路字型的範例