CSS 字体 font-family属性(转)

CSS规范清楚的认识到，字体选择是一个常见而且很重要的特性，所以设置字体的属性就是样式表中最常见的用途之一。

字体相关的属性在CSS1就已经定义，CSS3又新增了font-stretch 和 font-size-adjust 这两个属性。

人们早已认识到字体选择很重要，并在CSS2就支持可下载字体，也定义了 @font-face 相关属性，但是并没有得到浏览器的广泛支持。直到CSS3，浏览器才开始支持 @font-face，使设计师可以在网页中使用自己喜欢的任意字体。

字体系列
在CSS中，通过 font-family属性来指定文本所使用的字体系列。语法格式为：

font-family: [ | ] #
其中，family-name为字体系列的名称；generic-family为通用字体系列的名称。也就是说，font-family属性的值既可以是具体的字体系列的名称，也可以是通用字体系列的名称。

CSS定义了 5 种通用字体系列，分别是serif、sans-serif、cursive、fantasy、monospace，font-family属性可用使用其中的任何一种。如果希望文档使用一种通用字体系列中的某个字体，但并不关心是哪一种具体的字体，使用通用字体系列就比较合适。如：

body {
font-family: sans-serif;
}
这样，浏览器就会从 sans-serif 字体系列中选择一种字体，并将它应用到 body 元素。由于 font-family属性具有继承性，这种字体将会应用到 body 元素中的所有元素，除非有一种更特殊的选择器将其覆盖。

选择字体时，要尽量选择能够引人注目（特别是标题），并且容易阅读的字体。当然，设计师也可以选择使用特定的字体。假如设计师希望所有 h1 标题都使用 Georgia 字体，可以使用以下声明：

h1 {
font-family: Georgia;
}
这会使浏览器对所有 h1 标题都使用 Georgia 字体。当然，这个规则是假设访问者的计算机上已经安装了该字体。并且，设计师总是希望使用任何想要的字体，遗憾的是，如果访问者的计算机上没有安装该字体，浏览器便会使用默认字体来显示 h1 标题。

不过，不必万念俱灰，通过结合特定字体和通用字体系列，可以创建与你预想相同的文档。可以使用以下规则，告诉浏览器使用 Georgia 字体（如果可用），如果 Georgia 字体不可用，就使用另外一种 serif 字体：

h1 {
font-family: Georgia, serif;
}
这时，如果访问者的计算机上没有安装Georgia字体，但安装了 Times 字体，浏览器就会使用 Times。尽管 Times 与 Georgia 并不完全匹配，但至少足够接近。

 出于这个原因，强烈建议在所有 font-family 规则中，都提供一个通用字体系列。这样一来，就提供了一条后路。

如果你对字体很熟悉，也可以在 font-family属性中指定想要的字体，并按优先顺序依次排列，中间用逗号分隔。如：

body {
font-family: Arial, SimSun, Helvetica, sans-serif;
}
浏览器会根据这个列表，按顺序查找这些字体，如果访问者的计算机上安装了第一种字体，就可以正确显示。如果没有安装第一种字体，就自动切换到第二种、第三种字体，以此类推。如果所有字体都没有找到，就会从 sans-serif 字体系列中选择一种可用的字体。

利用这个特性，还可以实现英文和中文使用不同字体的效果。通常的做法是，把英文字体写在前面，中文字体写在后面。如：

p {
font-family: Arial, 'Microsoft YaHei'; /* Arial，微软雅黑 */
}
这样，浏览器会优先使用 Arial 字体显示文本，由于中文字符不识别 Arial 字体，就会在后面的字体中继续查找，找到 Microsoft YaHei 字体后，便对中文应用该字体，这样，就达到了中文和英文使用不同字体的效果。

在指定字体时，如果字体名称中包含空格或中文或其他特殊字符，则要把整个字体名称用放在引号中，可以使用单引号，也可以使用双引号。并且，字体名称不区分大小写。

对于中文，有三种指定字体的方法：一种是直接使用中文字体名称，一种是使用英文字体名称，一种是使用字体的 unicode 码。但是，在CSS文档中定义字体时，如果直接书写中文，经常会出现乱码，或者在某些浏览器下字体不生效。一个常用的解决办法，是把中文字体名称转换为对应的英文字体名称或unicode 码。如，宋体的英文字体名称为 SimSun、unicode 码为 \5B8B\4F53，则可以写成：

p {
font-family: SimSun;
}
也可以写成：

p {
font-family: "\5B8B\4F53";
}
上述两种写法是等价的，可以自行选择。为了方便查阅，几种常用字体的中文名称、英文名称、unicode码的对照关系见表 3‑1。

表 3-1 常见字体对照表
中文名称    英文名称    unicode
新细明体    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
仿宋_GB23122    FangSong_GB2312    \4EFF\5B8B_GB2312
楷体_GB2312    KaiTi_GB2312    \6977\4F53_GB2312
微软正黑体    Microsoft JhengHei    \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑    Microsoft YaHei    \5FAE\8F6F\96C5\9ED1
华文细黑    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
丽宋    ProLiSong Pro Light    \4E3D\5B8B Pro
标楷体    BiauKai    \6807\6977\4F53
隶书    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
虽然CSS提供了备选字体的机制，但是，在CSS3之前，所有的字体都只能是Web安全字体（即预先安装在主流个人计算机操作系统中的字体的子集）。直到CSS3中@font-face的出现，这个问题才彻底得到解决。

说明：

虽然 font-family属性具有继承性，但有几个元素不会继承父元素的字体设置，其中有表单的select、textarea 和input 元素。不过，可以强制它们继承父元素的字体设置。代码如下：

input, select, textarea {
font-family: inherit;
}
关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。
--------------------- 
作者：ixygj197875 
来源：CSDN 
原文：https://blog.csdn.net/ixygj197875/article/details/79312540 
版权声明：本文为博主原创文章，转载请附上博文链接！