從今年二月啟用 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 標準的各種瀏覽器.
* 兩個字以上的字型名稱, 前後加上單引號( ' )以避免讀取錯誤.
Author Summary
Subject : Blogger Font - 字型修改密技
Author : - Dream Talker Updated at: 9:00 PM
Votes : - 5.0 - based on 2015
Blogger 提供的字型雖多,但只限於字母拼音的語系.對中文使用者來說, 並沒有太大意義,只有在使用到英文詞彙、數字符號時才看得到字型設計.分享如何修改字體,並指定中英文同時使用不同字型的方法.
Author : - Dream Talker Updated at: 9:00 PM
Votes : - 5.0 - based on 2015
Blogger 提供的字型雖多,但只限於字母拼音的語系.對中文使用者來說, 並沒有太大意義,只有在使用到英文詞彙、數字符號時才看得到字型設計.分享如何修改字體,並指定中英文同時使用不同字型的方法.
5 Stars - Reviews
請問~文章上面的facebook send為什麼說傳送錯誤捏?
ReplyDelete我明明有登入臉書帳號.
小芝
To @Anonymous :
ReplyDelete有可能是你尚未開通Facebook Email.
開通方式按此 Facebook Email
To @Mark X :3Q~ 芝~
ReplyDelete我弄不到欸 ><
ReplyDeleteTo @xBaobaby19 :
Delete我看到妳的CSS裡面已經插入Happy Monkey的樣式碼, 可是妳沒有更改value指定值.
剛才看了你的網頁原始碼,CSS並沒有修改到指定值. 所以在步驟10要將字型加到value後面. 用Ctrl+F 找到 type="font"
看看哪些模組需要修改(如Page Text主文,或Title,Links...)例如以下這一段修改成：
<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px 'Happy Monkey', Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#333333"/>
</Group>
其它想要使用這一種字型的value指定值都要改. 甚至想使用更多種的字型都可以. 前提是妳要知道哪一段的CSS表示哪個區域的字型.
不過我不確定妳的CSS裡 .wf-inactive 這個樣式用在哪裡? 重複命令同一位置的字型有時會干擾. (以先被載入的優先顯示)
Mark大您好 :)
ReplyDelete找了很久終於找到在blogger放中文字體的方法 謝謝您的分享!
我有稍微試了一下 但是還沒用到試到web fonts的地方
我想請問一下如果我的裡姐沒錯的話
是不是我如要用這方法 (不讓中英文字型衝突)
就不能使用blogger内建的字型了呢?
等一下, 剛才的回覆有點顛倒.
Delete你想同時用100種字型都可以(包含不同中文).
請注意CSS裡面有關要指定 "Font" 這個值, 如：
<Variable name="body.font" description="Font" type="font" ．．．
使用內建字型時, 中文就不可擺在value值的最前面. (因為中文會連英文字都設計好一套了) Blogger裡面, 部落格標題 header,文章標題,小模組,連結link...等等都可以設定不同字型(可是這樣看起來會很亂).
web font擺在內建字型的後面就會先讀內建字型,依序解讀下去. (可是通常只會讀第一種,輪不到第二種)所以只有使用web font時才能同時指定中文. 嗯,你解讀得沒錯.
當你使用不同語系的字母時, 使用wb font這種效果最清楚. value值的第一個web font裡面沒有這種文字, 他會依序找第二個web font或是內建值.
在一篇文章內, 你要使用同時使用內建英文... 有點麻煩.
就是在預設值設定內建英文的名稱.(在模組設計那裏要先指定,Blogger的CSS才會加載這一字型)等你要用時, 在編輯器裡把那一段框起來, 選用文字(F)功能(預設值). 這樣就可以在文章內同時使用不同英文字. 中文則是value值.
我後來想想哪裡不對勁.. Blogger的內建字也是載入Google Web Fonts字庫. 你在它的右側 "Search" 輸入內建字型名稱,可以找到同樣的字型.
Delete我再找時間寫如何同時使用多種字型的方法.
歡迎連結, 謝謝.
ReplyDelete網頁版已經設定標準網頁, 行動版連結在搜尋上是一樣的, 沒有影響.
這篇沒有特殊的jquery, 不影響閱讀內容.
你好
ReplyDelete我的網站會使用多種語文,如果搭配很多種字型在不同語言,第8項的程式碼會列出一堆link在CSS樣式表上.請問有沒有甚麼好建議?
謝囉!
嗯?! 為甚麼有一堆link?
Delete✿ 第5步驟, 選用各種字型後, 在第6點步驟按下"USE"後在左側列表打勾的字型就是你要的字型. 頁面往下捲動, 他把程式碼的link都整理好了, 你只需要複製下來即可.
不需要每一種字型就列個link. 希望我沒誤解你的問題.
非常感謝!
Delete在另一篇動態文字裡看到示範方法囉!