您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 移動前端 >> 瀏覽設(shè)計教程

中文字體在CSS中的表達(dá)方式

 

在寫一個網(wǎng)站的樣式表的時候,都會不可避免地用到一些中文字體,比如說微軟雅黑、黑體等,除非是做英文站,或者說你樂意整站都用瀏覽器默認(rèn)的字體, 那我也算服了U。在 CSS 中寫入中文字體的方法一般采用 font-family:"微軟雅黑","黑體";這樣類似的表達(dá)方式,但是對于像 WordPress 這樣需要 UTF8 編碼平臺來說,一個不注意沒有轉(zhuǎn)換編碼就會導(dǎo)致中文字體無法按照希望的字體表形出來。所以我們可以通過英文、unicode 這種形式來表達(dá)中文,比如說剛才的 font-family:"微軟雅黑","黑體";就可以寫成 font-family:"Microsoft Yahei","SimHei"; 這樣看起來是不是也可以統(tǒng)一一點呢。

中文字體與英文、unicode 對應(yīng)的太多,背也背不下來,就搜集了一張表格收藏記錄一下,希望也是你想要的:

 

 

中文名 英文名 Unicode
Mac OS
華文細(xì)黑 STHeiti Light [STXihei] 534E65877EC69ED1
華文黑體 STHeiti 534E65879ED14F53
華文楷體 STKaiti 534E658769774F53
華文宋體 STSong 534E65875B8B4F53
華文仿宋 STFangsong 534E65874EFF5B8B
麗黑 Pro LiHei Pro Medium 4E3D9ED1 Pro
麗宋 Pro LiSong Pro Light 4E3D5B8B Pro
標(biāo)楷體 BiauKai 680769774F53
蘋果麗中黑 Apple LiGothic Medium 82F9679C4E3D4E2D9ED1
蘋果麗細(xì)宋 Apple LiSung Light 82F9679C4E3D7EC65B8B
Windows
新細(xì)明體 PMingLiU 65B07EC6660E4F53
細(xì)明體 MingLiU 7EC6660E4F53
標(biāo)楷體 DFKai-SB 680769774F53
黑體 SimHei 9ED14F53
宋體 SimSun 5B8B4F53
新宋體 NSimSun 65B05B8B4F53
仿宋 FangSong 4EFF5B8B
楷體 KaiTi 69774F53
仿宋_GB2312 FangSong_GB2312 4EFF5B8B_GB2312
楷體_GB2312 KaiTi_GB2312 69774F53_GB2312
微軟正黑體 Microsoft JhengHei 5FAEx8F6F6B639ED14F53
微軟雅黑 Microsoft YaHei 5FAE8F6F96C59ED1
Office
隸書 LiSu 96B64E66
幼圓 YouYuan 5E7C5706
華文細(xì)黑 STXihei 534E65877EC69ED1
華文楷體 STKaiti 534E658769774F53
華文宋體 STSong 534E65875B8B4F53
華文中宋 STZhongsong 534E65874E2D5B8B
華文仿宋 STFangsong 534E65874EFF5B8B
方正舒體 FZShuTi 65B96B6382124F53
方正姚體 FZYaoti 65B96B6359DA4F53
華文彩云 STCaiyun 534E65875F694E91
華文琥珀 STHupo 534E6587742573C0
華文隸書 STLiti 534E658796B64E66
華文行楷 STXingkai 534E6587884C6977
華文新魏 STXinwei 534E658765B09B4F

  很全面吧,但也不要高興地太早,因為我們有著人手一個規(guī)則的瀏覽器大軍,就算是舉著完美支持 CSS 大旗的 Firefox,也有不盡如人意的地方,因為 Firefox 居然不支持以上別名,對它來說 "Microsoft Yahei" 并不是微軟雅黑,只能反饋出瀏覽器默認(rèn)字體的的結(jié)果,唉,瀏覽器太多也不好,還不如回到 IE 壟斷的年代,沒有比較,也就沒有抱怨。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/wd1551.html
移動開發(fā)那些事
前端css - li內(nèi)容不換行、div加滾動條
圖趣網(wǎng)微信
建議反饋
×