css中font-family的中文字体

Posted 2020-07-16 不可满

说到css中的font-family，相信很多朋友经常用，但不知道当你遇到引用中文字体的时候你会怎么写？
最近特别关注了下，发现最常用的基本有三种类型：

1. 1、直接中文；
2. 2、英文形式；
3. 3、unicode码；

前面两种形式很好理解，unicode码是什么意思呢？下面看基本定义:

Unicode（统一码、万国码、单一码）是一种在计算机上使用的字符编码。它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。

更多内容请查看百度百科对Unicode的介绍。
介绍完方案，再谈下使用。之前在看玉伯写的一篇文章《中文字体在 CSS 中的写法》 中提到：font-family中用到的宋体，“用 unicode 表示，不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法”。我在网上搜索了下相关内容，大多都是摘抄这篇文章，并没有提到具体哪个版本的Firefox和Opera会不支持英文的写法。

对比下，三种方法各有优缺点：中文形式的方便记忆，但在不支持中文的系统或者编码的页面则无法正常显示；英文形式的兼容了系统和编码的问题，但不方便记忆，又可能有潜在的风险；unicode码兼容行最好，但也存在记忆难的问题。

综合权衡下，在性能和安全第一的条件下，还是推荐使用unicode码。如果不是太严格的情况下，可以选择其他两种。

下面整理下常用的各种字体的不同显示形式，方便使用的时候查找：

中文名	英文名	Unicode
Windows
* 宋体	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
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
丽黑 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

上表中标*为常用字体