[教學] 在Blogger上使用Google Fonts的楷書字體

Google Fonts: Early Access提供了幾套中文字型給大家用,未來這些字型"畢業"的話,應該會直接嵌入Google的各個服務;但在"畢業"以前,可以用手動的方式加入Blogger中。這邊簡單的講如何在Blogger提供的範本中,加入使用楷書字型。

1. 首先先去上面Google Fonts中,找到楷書的部份,基本上繁體中文字型是在最下面(感謝cwTeX團隊的這套字型啊!)。這兩行的指令先準備好。

2. 打開Blogger的範本設定,選擇編輯HTML。

3. 找到<head>的標籤,在下面加入如圖內的CSS指令。中間那行就是要匯入使用的字型,若今天不只想用楷體,而這邊就要加入多個字型CSS的匯入。加好後儲存離開。

4. 在回到範本設定,這次選擇自訂。然後選進階→新增CSS(在最下面)。然後在右邊空白處加入想要使用楷書的CSS標籤。

如果是自己打造的CSS,那標籤什麼的當然自己最清楚;但如果是套用現成的樣板,那要找出某區塊的CSS就會比較麻煩。這邊推薦使用Firefox的Firebug附加元件,利用裡面的觀察模式,可以很快速的用滑鼠找出網頁上某區塊的CSS標籤。

操作上得去修改HTML內容,這是比較討厭的地方,沒法在新增CSS那邊直接一口氣解決(似乎是因為讀取順序的問題,我沒有很詳細去研究Blogger提供的範本)。

不過真正讓人難以抉擇的地方,就是這樣使用中文字型,代價就是每次讀取網頁都得先下載6.2MB的楷體啊!

JustFont的動態字型生成技術真的蠻厲害的...