最近一直在弄主頁的版面,在文字編排的時候就遇到了一個蛋疼的事情:
當中英混雜的時候,中文字型裡的英文字母是在噁心,想了一下,可以在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文字字體定義結束*/