2015年7月3日

讓網頁顯示特定中文字型﹍安裝實作教學

A+
chinese-custom-font在網站使用中文字型是個大問題,由於字型檔在現有的網路速度下,過長的傳輸時間讓我們不能隨心所欲使用喜歡的字型,也因為如此,只能遷就訪客作業系統現有的字型,例如「網頁中文字型除了微軟正黑體, 還有這些好選擇!」。

這篇「使用 UNICODE 特殊符號取代網頁小圖示」,使用了 CSS3 的語法,可以讓網頁只載入字型檔中特定的字元,而不必載入整個字型檔。從而舉一反三,龐大的中文字型檔,使用了這個技巧後,就可以只載入指定的文字,節省了大量的傳輸時間,以下就來看看怎麼實作吧!



一、CSS 原理


要瞭解這項技巧,首先得瞭解 CSS 的操作原理。

1. Font-Face

參照「使用 UNICODE 特殊符號取代網頁小圖示」,關鍵在於使用了 CSS 的 font-face 語法:

<style>
@font-face {
font-family: '自定義字型名稱';
src: url('字型檔連結') format('truetype');
unicode-range: 文字1 編碼, 文字2 編碼, 文字3 編碼;
}
</style>

首先我們必須取得中文字型的連結,填入綠色字串的位置。

為了節省載入速度,使用 unicode-range 將只會載入特定文字,因此我們必須找出這些文字的 Unicode 編碼,一一填入紅色字串的位置,每個編碼之間用小寫逗號 "," 隔開。

以上說明先有個印象即可,參考後面的實作會更清楚。


2. 使用限制

因為只顯示該中文字型的部分文字,因此這個字型不適合用在文章內容的區塊,只適合用在 "網站標題"、"側邊欄標題"、或是網頁會呈現 "固定文字" 的地方。一般而言,網站標題比較會是站長們想使用特殊中文字型的地方

另一個問題是版權,可在個人電腦使用的中文字型,不代表可以放在網頁上公開使用,例如華康字型。因此必須尋找 "免費且合法" 的中文字型下載,下個章節會提供一些建議。


3. 瀏覽性支援度

根據「Font unicode-range subsetting」,unicode-range 在各種瀏覽器版本的支援度並非全面性,這篇有詳細的列表。因此本文這項技巧,需要時間才能比較普及。目前測試的結果,在 Chrome/Opera 家族,中文字型的支援度比較好。



二、中文字型下載


以下介紹一系列的免費中文字型,如想要更多選擇,可另外用 Google 尋找看看。

1. 思源黑體

這是一套 Google 與 Adobe 合作的免費字型,其介紹與下載請參考這篇「思源黑體開放免費安裝」。


2. 王漢宗 48 套自由字型

這是中原大學數學系王漢宗教授捐贈出來可公開使用的字型,介紹與下載請參考這篇「王漢宗(免費中文字型)」。

該篇文章提到這些字型有官司爭議,WFU 對這些法律問題不太清楚,不過根據「維基百科」,雲端字型服務公司 Just Font 不認為存在授權問題,他們的網頁的確也列出王漢宗免費字型供選擇,那麼我想這一套字型目前是可以安心使用的。

下圖為使用 "王漢宗顏楷體" 製作 WFU BLOG 網站標題的示意圖:

wfublog-chinese-font


3. 漢鼎字型

這篇「17個免費中文字型下載」介紹了一系列美觀又特別的中文字型,是由德國海德堡大學設計且免費釋出。



三、中文字型編碼


有了免費中文字型後,第二個步驟是取得中文字的 Unicode 編碼,這也是挺麻煩的一件事。

於是 WFU 做了下面這個轉換器,貼上所有需要的中文字後,會自動產生 Uicode 編碼:




四、實作範例


接下來以 "王漢宗顏楷體" 為例,示範如何讓 WFU BLOG 的網站標題 "BLOGGER 調校資料庫" 呈現這個字型。

1. 按照「二、中文字型下載」提供的相關連結,下載 "王漢宗顏楷體",並上傳到自己的網頁空間。


2. 利用「三、中文字型編碼」的轉換器,貼上 "調校資料庫"  這幾個字後,可得到 Unicode 轉換碼 "U+8ABF, U+6821, U+8CC7, U+6599, U+5EAB;"


3. 在範本中 </head> 之前,插入以下 CSS 語法:

<style>
@font-face {
font-family: 'wfu';
src: url('https://dl.dropboxusercontent.com/u/39186009/js/css/wt064.ttf') format('truetype');
unicode-range: U+8ABF, U+6821, U+8CC7, U+6599, U+5EAB;
}
.wfublog{font-family: 'wfu';}
</style>

  • 藍色字串 "wfu" 為自定義的字型名稱,可自行替換
  • 綠色字串為 "王漢宗顏楷體" 字型的外連路徑,因為 Google Drive 有外連流量限制,請自行將字形檔上傳到自己的 Google Drive。如不熟悉操作方法,可參考「Google Drive 檔案分流教學」,並用「Google Drive 外連產生器 V2」取得外連網址。
  • 紅色字串就是用前面轉換器得到的字串。輸入這五個 Unicode 碼,網頁上將只有 "調校資料庫" 這五個字能顯示 "王漢宗顏楷體",其他字都無法呈現這個字型。
  • 橘色字串可改為自定義名稱,請見後述的使用說明。


4. 在網頁要顯示 "王漢宗顏楷體" 的地方,填入以下 html 碼:

<span class="wfublog">調校資料庫<span>
以上的字串 "wfublog" 與前面的橘色字串一致,即可套用 CSS 設定。

至此完成所有步驟,可再看一次網站標題的效果圖:

wfublog-chinese-font



五、補充說明


1. 安裝語法中的 unicode-range 千萬要記得設定,若沒設定的話,網頁將會載入完整的字型檔,大小至少有數 MB ,這將是大災難,讀者會跑光光的。

2. 設定了 unicode-range 範圍,下面提供一個範例,這一排文字之中,將只有 "調校資料庫" 這五個字能顯示 "王漢宗顏楷體":

調整 校正 資料 庫存

3. 非常熱門的 "康熙字典體",在這個「文悅字型」的網頁提供了試用版可下載,文字量不多。許多出版品都拿 "康熙字典體" 的試用版來印刷,那麼這個字體究竟能否在網頁上使用,WFU 對法律細節不太瞭解。如果可以使用、且試用版包含了讀者想使用的文字,那麼或許也是一種選擇。


更多字型相關文章:

7 則留言:

  1. 您好,先謝謝發表了這篇詳細的教學文,使學生受益良多,但是有個神奇的問題,我嘗試了上傳其他王漢宗中文字型的檔案到google drive,也按照您的方法成功產生出了超連結,可是不知道為何無法讓文字套用到網頁上,詳細狀況如下列圖示:
    (大大的結果)
    https://drive.google.com/file/d/0B75T2z0Hh8Q-Q2w0UDJLSkVtRGc/view?usp=sharing
    (學生的結果)
    https://drive.google.com/file/d/0B75T2z0Hh8Q-S0FEOTgzbDVxNWM/view?usp=sharing

    這是我上傳王漢宗字型的ttf檔案:
    https://googledrive.com/host/0B75T2z0Hh8Q-OG9qNmJRdm81Mm8/wp010-05.ttf

    以上,希望能找到一個答案,十分感謝><"

    回覆刪除
    回覆
    1. 我將你的 ttf 連結 https://googledrive.com/host/0B75T2z0Hh8Q-OG9qNmJRdm81Mm8/wp010-05.ttf 貼到瀏覽器,出現 404 錯誤,因此這個外連是沒有作用的。

      請參考「Google Drive 外連產生器 V2」 http://www.wfublog.com/2015/05/google-drive-direct-link-widget-v2.html → 「四、注意事項及簡易排錯流程」,檢查漏掉的步驟。

      刪除
    2. 好奇怪啊!
      我自己電腦上可以下載,可是從他人網站卻無法,看來是沒有仔細除錯...
      謝謝您的回覆,若有問題再請您指教

      刪除
  2. 不好意思 我想請問第4步驟(4. 在網頁要顯示 "王漢宗顏楷體" 的地方,填入以下 html 碼:),要插入在哪一個符號後面,我想要放在我的網誌標題,有點不知所措...
    底下是我做的語法 語法有故意刪掉前面的符號


    style
    @font-face {
    font-family: 'jeeyang';
    src: url('https://googledrive.com/host/0B0QGzGipdII-ZkZJS3BGcVpPV3M/wt064.ttf') format('truetype');
    unicode-range: U+5409, U+6D0B, U+6C34, U+7522;
    }
    .jyang{font-family: 'jeeyang';}
    /style

    span class="jyang">吉洋水產/span

    回覆刪除
    回覆
    1. 看起來你的主要問題是如何放在網誌標題,可參考 http://www.wfublog.com/2013/03/blogger-template.html →「二、標頭區塊」,可找到答案

      另外,Google Drive 將於八月底關閉外連 http://www.wfublog.com/2016/04/google-drive-disable-direct-link.html → 建議外連改用 dropbox → http://www.wfublog.com/2016/04/dropbox-direct-link-generator.html

      刪除
  3. 請問有辦法讓電腦本身就有該字體的人不用從外連下載的辦法嗎?

    回覆刪除
    回覆
    1. 應該是沒有 瀏覽器不太可能存取瀏覽器之外的權限

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。