html页面中文字体在css中使用Unicode编码

在前端html页面中,当我们需要设置中文字体时,通常会直接使用字体名称,比如设置字体黑体,会写成font-family: 宋体。一般情况下虽说也没什么毛病,但还是可能会出现css中的中文字体乱码,而且一些浏览器本身也不兼容(如在ie6下直接使用中文字体有时候会出现样式丢失问题)。

为避免出现各种各样的问题,所以在设置网页中的中文字体时,更应该使用Unicode编码的中文字体

由于CSS文件基本都是UTF-8的编码模式,所以我们可以把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

举例说明:比如设置中文字体“宋体”,它的Unicode编码为“\5b8b\4f53″,因此在CSS中就可以这样写:font-family: '\5b8b\4f53'

当我们需要其他字体编码时,可以借助谷歌浏览器来查询所需中文字体对应的Unicode编码。方法很简单,只需打开网页,右键检查或F12,在Console中输入“escape('中文字体名称');”回车即可获得想要的Unicode编码(注:需要将%u换成\)。

比如输入escape('微软雅黑');,回车返回的信息为“%u5FAE%u8F6F%u96C5%u9ED1”,替换“%u”后即可得到微软雅黑的Unicode编码为“\5FAE\8F6F\96C5\9ED1”。如下图所示:

html页面中文字体在css中使用Unicode编码

为方便需要的朋友,白天已将常用的中文字体给大家整理出来了它们对应的Unicode编码:

中文名英文名UnicodeUnicode 2
Mac OS
华文细黑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华文仿宋
丽黑 ProLiHei Pro Medium\4E3D\9ED1 Pro丽黑 Pro
丽宋 ProLiSong Pro Light\4E3D\5B8B Pro丽宋 Pro
标楷体BiauKai\6807\6977\4F53标楷体
苹果丽中黑Apple LiGothic Medium\82F9\679C\4E3D\4E2D\9ED1苹果丽中黑
苹果丽细宋Apple LiSung Light\82F9\679C\4E3D\7EC6\5B8B苹果丽细宋
Windows
新细明体PMingLiU\65B0\7EC6\660E\4F53新细明体
细明体MingLiU\7EC6\660E\4F53细明体
标楷体DFKai-SB\6807\6977\4F53标楷体
黑体SimHei\9ED1\4F53黑体
宋体SimSun\5B8B\4F53宋体
新宋体NSimSun\65B0\5B8B\4F53新宋体
仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53楷体
仿宋_GB2312FangSong_GB2312\4EFF\5B8B_GB2312仿宋_GB2312
楷体_GB2312KaiTi_GB2312\6977\4F53_GB2312楷体_GB2312
微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微软雅黑
Office
隶书LiSu\96B6\4E66隶书
幼圆YouYuan\5E7C\5706幼圆
华文细黑STXihei\534E\6587\7EC6\9ED1华文细黑
华文楷体STKaiti\534E\6587\6977\4F53华文楷体
华文宋体STSong\534E\6587\5B8B\4F53华文宋体
华文中宋STZhongsong\534E\6587\4E2D\5B8B华文中宋
华文仿宋STFangsong\534E\6587\4EFF\5B8B华文仿宋
方正舒体FZShuTi\65B9\6B63\8212\4F53方正舒体
方正姚体FZYaoti\65B9\6B63\59DA\4F53方正姚体
华文彩云STCaiyun\534E\6587\5F69\4E91华文彩云
华文琥珀STHupo\534E\6587\7425\73C0华文琥珀
华文隶书STLiti\534E\6587\96B6\4E66华文隶书
华文行楷STXingkai\534E\6587\884C\6977华文行楷
华文新魏STXinwei\534E\6587\65B0\9B4F华文新魏

原创文章,作者:白天,如若转载请注明出处:html页面中文字体在css中使用Unicode编码

(2)
打赏 微信扫一扫 微信扫一扫
白天的头像白天博主
上一篇 2020年9月25日 19:28:06
下一篇 2020年12月30日 20:19:10

相关阅读推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

微信内浏白天博客