中英文字分別使用不同字體 via @font-face

最近一直在弄主頁的版面,在文字編排的時候就遇到了一個蛋疼的事情:

當中英混雜的時候,中文字型裡的英文字母是在噁心,想了一下,可以在CSS裏這樣寫:

body{

font-family : “Helvetica”, “Trebuchet MS”, “Verdana”, “Tahoma”, “STXihei”, “WenQuanYi ZenHei”, “Microsoft JhengHei”, “Heiti TC”, “Heiti SC”, “MS Gothic”;

}

理論上,前面的英文字型裏沒有漢字,瀏覽器應該是逐個往後找,直到找到含有漢字的字形為止然後顯示才對,但是似乎想得很完美,試驗時效果糟糕(比如IE)。

於是想起CSS裏一個很實用的東東 —— “@font-face”。

之前一直用來做 “font-icon”,可以指定某一字符編碼的字符使用自定義的字型——我們能不能將中文和英文的所有字符編碼分別都指定一種字體呢?這樣不就不可以解決開始的困擾了嗎?

上網找了下看看有沒有先例,發現有幾個人已經領先一步了:

“ 小駱駝商隊” 的《用 CSS3 指定網頁的中英文分別使用不同字體

“Richard Ishida”的《Using unicode-range in font-face in CSS

都是兩篇舊文了,不過沒關係,嘗試了下,很惱火啊 (╯‵□′)╯︵┴─┴

Chrome & Safari 工作良好,Firefox(意料之外)、IE(不出所料)都不支持啊TTATT

實在“坑爹”,一氣之下,老子不管了!~☆

附上源碼 可自行修改~

@charset “UTF-8”;
/*============================================*/
/* (C)EoZenfung Date:2013-1-1 23:14:55 */
/* WebSite: http://www.auzeonfung.com */
/*============================================*/

/*日文平假名字體定義*/
@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“”), local(“Microsoft JhengHei”);
unicode-range: U+3040-309F;
}
/*日文片假名字體定義*/
@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“微軟正黑體”), local(“Microsoft JhengHei”);
unicode-range: U+30A0-30FF;
}
/*日文平假名語音擴展字體定義*/
@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“微軟正黑體”), local(“Microsoft JhengHei”);
unicode-range: U+31F0-31FF;
}
/*中日韓統一表意文字字體定義*/
@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“微軟正黑體”), local(“Microsoft JhengHei”);
unicode-range: U+4E00-9FFF;
}
/*拉丁文&各種符號還有希臘字母的字體定義*/
@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“微軟正黑體”), local(“Microsoft JhengHei”);
unicode-range: U+0020-03FF;
}
/*數字和箭頭符號等字體定義*/
@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“微軟正黑體”), local(“Microsoft JhengHei”);
unicode-range: U+2000-2BFF;
}

/*CJK 定義開始*/

/*CJK 定義參考
Code point range
Block name
Release
U+3400..U+4DB5
CJK Unified Ideographs Extension A
3.0
U+4E00..U+9FA5
CJK Unified Ideographs
1.1
U+9FA6..U+9FBB
CJK Unified Ideographs
4.1
U+F900..U+FA2D
CJK Compatibility Ideographs
1.1
U+FA30..U+FA6A
CJK Compatibility Ideographs
3.2
U+FA70..U+FAD9
CJK Compatibility Ideographs
4.1
U+20000..U+2A6D6
CJK Unified Ideographs Extension B
3.1
U+2F800..U+2FA1D
CJK Compatibility Supplement
3.1
*/

@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“微軟正黑體”), local(“Microsoft JhengHei”);
unicode-range:

@font-face {
font-family : sans-serif;
src : local(Heiti TC), local(“微軟正黑體”), local(“Microsoft JhengHei”);
unicode-range: U+3400-U+4DB5,u+4E00-U+9FA5,U+9FA6-U+9FBB,U+F900-U+FA2D,U+FA30-U+FA6A,U+FA70-U+FAD9,U+20000-U+2A6D6,U+2F800-U+2FA1D
}
}

/*CJK文字字體定義結束*/

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *