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”。如下图所示：

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

文章最后一次修改于2020年12月24日 09:50:38