關於幾個常見的css字體設定問題

font:12px/1.5 arial,\5b8b\4f53,sans-serif 什麼意思   

字體:字體大小/字體行高 字體格式

在CSS中使用中文字體通常直接設置字體名稱,比如設置字體爲宋體:font-family:’宋體’。但因此產生的一個問題是,如果CSS編碼有誤,會導致頁面加載後CSS中的中文字體亂碼

直接使用中文字體,有時候在ie6下會出現樣式丟失問題。

而使用英文代替中文如:“font-family:SimSun”也不推薦,Firefox的部分版本與Opera在處理SimSun時會有問題。

所以推薦使用中文字體的Unicode編碼。 那怎麼解決這個亂碼問題呢,由於CSS文件基本都是UTF-8的編碼模式,所以我們可以把中文字體的名稱用相應的Unicode編碼來代替,這樣就可以有效的避免瀏覽器解釋CSS代碼時候出現亂碼的問題。比如中文字體“宋體”經過Unicode編碼後爲“\5b8b\4f53″,在CSS中就可以這樣寫:font-family:’ \5b8b\4f53’; 如果在你“DIV+CSS”的過程中,還需要用到一些表中沒有的字體的話,可以藉助Firefox的插件Firebug來查詢所需中文字體對應的Unicode編碼,方法很簡單,就是打開Firefox,然後打開Firebug,在“控制檯”裏底部“>>>”的後面像這樣輸入

escape('黑體');
escape('黑體');
escape('黑體');
escape('黑體');
escape('黑體');
escape('微軟雅黑');,然後會顯示一個信息,%u5FAE%u8F6F%u96C5%u9ED1這個就是中文字體“微軟雅黑”對應的Unicode編碼“\5FAE\8F6F\96C5\9ED1”,注意把%u改成\,否則可能會出錯。


巧用Firebug查詢中文字體的Unicode編碼(Firefox 14.0.1,Firebug 1.10.1)

另外,在設置字體時候最好把英文字體寫在前面,不然可能網頁裏所有的英文字體和數字都變成“宋體”或者別的字體去了,那樣看起來比較不美觀。例如:font-family:’ \5FAE\8F6F\96C5\9ED1’,Arial;最好像這樣寫:font-family:’\5FAE\8F6F\96C5\9ED1’,Arial;


爲了方便需要的朋友快速使用,下表中列出了一些常用中文字體的Unicode編碼:

宋體                   SimSun     \5B8B\4F53
黑體                   SimHei     \9ED1\4F53
微軟雅黑            Microsoft YaHei     \5FAE\8F6F\96C5\9ED1
微軟正黑體         Microsoft JhengHei     \5FAE\x8F6F\6B63\9ED1\4F53
新宋體                NSimSun     \65B0\5B8B\4F53
新細明體            PMingLiU     \65B0\7EC6\660E\4F53
細明體                MingLiU     \7EC6\660E\4F53
標楷體                DFKai-SB     \6807\6977\4F53
仿宋                    FangSong     \4EFF\5B8B
楷體                    KaiTi     \6977\4F53
仿宋_GB2312     FangSong_GB2312     \4EFF\5B8B_GB2312
楷體_GB2312     KaiTi_GB2312     \6977\4F53_GB2312
華文細黑             STHeiti Light [STXihei]     \534E\6587\7EC6\9ED1
華文黑體             STHeiti     \534E\6587\9ED1\4F53
華文楷體             STKaiti     \534E\6587\6977\4F53
華文宋體             STSong     \534E\6587\5B8B\4F53
華文仿宋             STFangsong     \534E\6587\4EFF\5B8B
麗黑 Pro             LiHei Pro Medium     \4E3D\9ED1 Pro
麗宋 Pro             LiSong Pro Light     \4E3D\5B8B Pro
標楷體                BiauKai     \6807\6977\4F53
蘋果麗中黑         Apple LiGothic Medium     \82F9\679C\4E3D\4E2D\9ED1
蘋果麗細宋         Apple LiSung Light     \82F9\679C\4E3D\7EC6\5B8B


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章