Blogger Font - 字型修改密技
從今年二月啟用 Blogger 以來, 更換了幾次字型. 一直覺得字型搭配得不好, 終於決定捨棄自訂範本裡提供的字型. 在此順便分享如何修改字體, 並指定中英文同時使用不同字型的方法.
Blogger 提供的字型雖多, 但只限於字母拼音的語系. 對中文使用者來說, 並沒有太大意義, 只有在使用到英文詞彙、數字符號時才看得到字型設計. 當然我們也可以在 CSS 裡面指定中文字型, 但是有個很大問題存在. 英數字符不多, 可以採用網頁字型; 中文數量則是太過龐大, 只能從電腦中讀取. 所以我們能指定的中文字型最好是大部分電腦系統內建的字型.
假設, 我想要將海報字體當作部落格的主要中文字型, 自己編輯後也許滿意. 有可能別人的電腦裡並沒有這個字型. 他所看到的完全是另一回事. 就像是沒有中文系統的外國人, 他們透過網路, 在電腦裡看到的中文字也有差異.
當我指定某種中文字型當作主要字型, 看起來會比較完整. 因為中文字型也會連英數字母、符號一起設計. 反之, 如果我在 Blogger 自訂範本裡採用英文當作主要字型, 中文就會隨每個人電腦不同而顯示. 除非有另外指定. 一般指定方法, 如圖：請按圖放大觀看.
1. 預設值. 依照讀取字型優先順序, 預先設定幾款字型以供他人電腦得以顯示.
2. 指定值. 將英文字型排在前面, 加 "逗號" 空一格後, 才排入中文. 這樣英文字型讀不到中文字, 才會繼續轉讀後面的中文字型. 於是中英文能夠同時呈現不同字型.
現在問題來了...
Firefox 遵循 W3C 的標準, 的確會依照 CSS 的指定顯示, Chrome 卻不能.
Chrome 會採用指定值最前面的字型. 在邏輯上的確應該只能顯示單一字型, 讀取不到才跳到預設值. (仍然只能顯示一種字型)
對 Chrome 而言, 沒有所謂讀取不到的情形, 將中文當成英文字型讀取後編碼, 也不跳轉到下一個預設字型. 如此可以加快網頁讀取; 卻完全不便於中文系統的部落格, 不曾考慮中文顯示美觀與否, 於是可能顯示著難看的中英文組合. 除非採用單一的中文字型. 想要像 Firefox 能同時顯示好看的中英文? 想都別想 ! 所以我們必須使用加載網頁字型的方法, 騙取 Chrome 乖乖的依順序讀取字型.
* 進入 Google Web Fonts , 選用共享的字型源碼. (字型比 Blogger 更多)
3. 輸入預覽用的字句, 用預設字句亦可. (網頁字型僅限拼音字母)
4. 選用字型的特徵, 傾斜度或粗細. 適用推薦的字型立即顯示於名單內.
5. 喜歡的字型先增加到集合選單內, 稍後再過濾, 選出最適合的字型.
6. 按下使用鍵, 測試此一網頁字型載入所需時間.
7. 測速表. 較新的 Web font 通常採取 woff 檔案, 能有效快速地載入.
8. 複製下方的源碼, 右側有插入源碼的範例.
9. 回到部落格版型 CSS 編輯. 插入在 <head> 的下方, 或放在 <b:skin> 之前都可以. 依據你的網頁宣告, 可能需要加上結尾 </link>
10. 複製字型名稱, 插入在 value 指定值的中文字型之前. (如步驟 2)
在需要替換字型的位置插入不同字型名稱, 就能依據程式碼顯示不同的字型.
這種方法也適用於符合 W3C 標準的各種瀏覽器.
* 兩個字以上的字型名稱, 前後加上單引號( ' )以避免讀取錯誤.
