CSS 字体 font-family属性

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

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

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

字体系列

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

1. font-family: [<family-name> | <generic-family>] #

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

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

1. body {
2. font-family: sans-serif;
3. }

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

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

1. h1 {
2. font-family: Georgia;
3. }

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

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

1. h1 {
2. font-family: Georgia, serif;
3. }

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

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

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

1. body {
2. font-family: Arial, SimSun, Helvetica, sans-serif;
3. }

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

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

1. p {
2. font-family: Arial, 'Microsoft YaHei'; /* Arial，微软雅黑 */
3. }

这样，浏览器会优先使用 Arial 字体显示文本，由于中文字符不识别 Arial 字体，就会在后面的字体中继续查找，找到 Microsoft YaHei 字体后，便对中文应用该字体，这样，就达到了中文和英文使用不同字体的效果。

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

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

1. p {
2. font-family: SimSun;
3. }

也可以写成：

1. p {
2. font-family: "5B8B4F53";
3. }

上述两种写法是等价的，可以自行选择。为了方便查阅，几种常用字体的中文名称、英文名称、unicode码的对照关系见表 3‑1。

虽然CSS提供了备选字体的机制，但是，在CSS3之前，所有的字体都只能是Web安全字体（即预先安装在主流个人计算机操作系统中的字体的子集）。直到CSS3中@font-face的出现，这个问题才彻底得到解决。

说明：

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

1. input, select, textarea {
2. font-family: inherit;
3. }

最后

以上就是和谐蜡烛为你收集整理的CSS 字体 font-family属性的全部内容，希望文章能够帮你解决CSS 字体 font-family属性所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。