css中font-family的中文字体

短命女 2022-08-06 03:11 143阅读 0赞

最常用的基本有三种类型：

1、直接中文；

2、英文形式；

3、unicode码；

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

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

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

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

![20141217110751680][]

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <thead> 
  <tr> 
   <th style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif">中文名</th> 
   <th style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif">英文名</th> 
   <th style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif">Unicode</th> 
  </tr> 
 </thead> 
</table>

**Windows**

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="color:rgb(255,0,0)">*</span>&nbsp;宋体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;SimSun</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\5B8B\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="color:rgb(255,0,0)">*</span>&nbsp;黑体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;SimHei</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\9ED1\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="color:rgb(255,0,0)">*</span>&nbsp;微软雅黑</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;Microsoft YaHei</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\5FAE\8F6F\96C5\9ED1</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 微软正黑体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;Microsoft JhengHei</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\5FAE\x8F6F\6B63\9ED1\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 新宋体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;NSimSun</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\65B0\5B8B\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 新细明体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;PMingLiU</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\65B0\7EC6\660E\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 细明体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;MingLiU</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\7EC6\660E\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 标楷体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;DFKai-SB</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\6807\6977\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 仿宋</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;FangSong</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\4EFF\5B8B</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 楷体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;KaiTi</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\6977\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 仿宋_GB2312</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;FangSong_GB2312</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\4EFF\5B8B_GB2312</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 楷体_GB2312</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;KaiTi_GB2312</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\6977\4F53_GB2312</td> 
  </tr> 
 </tbody> 
</table>

**Mac OS**

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="color:rgb(255,0,0)">*</span>&nbsp;华文细黑</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;STHeiti Light [STXihei]</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\534E\6587\7EC6\9ED1</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="color:rgb(255,0,0)">*</span>&nbsp;华文黑体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;STHeiti</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\534E\6587\9ED1\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 华文楷体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;STKaiti</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\534E\6587\6977\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 华文宋体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;STSong</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\534E\6587\5B8B\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 华文仿宋</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;STFangsong</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\534E\6587\4EFF\5B8B</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 丽黑 Pro</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;LiHei Pro Medium</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\4E3D\9ED1 Pro</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 丽宋 Pro</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;LiSong Pro Light</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\4E3D\5B8B Pro</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 标楷体</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;BiauKai</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\6807\6977\4F53</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 苹果丽中黑</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;Apple LiGothic Medium</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\82F9\679C\4E3D\4E2D\9ED1</td> 
  </tr> 
 </tbody> 
</table>

<table style="margin:0px; padding:0px; color:rgb(70,70,70); font-family:simsun; font-size:14px; background-color:rgb(234,247,253)"> 
 <tbody> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 苹果丽细宋</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;Apple LiSung Light</td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> &nbsp;&nbsp;\82F9\679C\4E3D\7EC6\5B8B</td> 
  </tr> 
 </tbody> 
</table>

[Unicode]: http://baike.baidu.com/view/40801.htm
[20141217110751680]: /images/20220806/6aca80458221473abee90339c9617bed.png