CSS 字体类型 - 绿叶网

CSS 字体类型简介

在 CSS 中，我们可以使用 font-family 属性来定义字体的类型。

语法：

font-family: family-name | generic-family;

说明：

font-family 的使用非常简单，只需要设定 family-name（字体系列名称）和 generic-family（通用系列名称）即可。

1. family-name

family-name 是字体系列名称，比如 “Arial”、“Times New Roman”、“微软雅黑” 等。 family-name 可以是一种或多种字体，如果是多种字体，那么字体与字体之间使用英文逗号隔开，比如：

font-family: Helvetica, Arial, Verdana;

上面代码表示：当浏览器加载网页时，会从左边第 1 个字体开始判断。如果当前计算机有 Helvetica 字体，就使用 Helvetica 字体显示；如果没有 Helvetica字体，就继续判断当前计算机是否有 Arial 字体……如果连最后一种字体也没有，那么就使用计算机默认字体来显示。

注意: 字体名称可以加双引号，也可以不加双引号。但如果字体名称中间有空格，比如 Times New Roman 字体，就必须加上双引号。

/* 正确 */
font-family: Arial, Consolas, "Times New Roman";

/* 错误 */
font-family: Arial, Consolas, Times New Roman;

2. generic-family

generic-family 是通用系列名称，常用的通用字有 5 种：sans-serif（无衬线体）、serif（衬线体）、monospace（等宽体）、cursive（手写体）、fantasy（幻想体）。其他还有 system-ui、emoji、math 和 fangsong，但后面这几种目前支持度不高、用途不广，这里不再展开介绍。

（1）serif 与 sans-serif

serif 是衬线体，而 sans-serif 是无衬线体。所谓的 “有无” 衬线（serif），指的是字的笔画末端是否有装饰部分。

sans-serif（无衬线）完全抛弃装饰衬线，只剩下主干。因此这种造型简明有力、更有现代感。在网页开发中，我们主要是使用 sans-serif。

serif与sans-serif

提示: “sans” 在法语中代表 “无”，因此 sans-serif 表示的就是 “无衬线体”。

（2）monospace

monospace 是等宽体，它表示所有的字母和数字都是同样的宽度。如果指定 monospace，就会自动套用系统预设的等宽字体。

对于中文来说，每个字在设计上都是等宽的，这没什么问题。但对于英文来说，就可能会造成排版上的困扰，比如 “W” 和 “i” 在宽度上就差很多。如果你的页面包含英文内容，并不十分推荐使用 monospace。

常用的等宽字体有 Courier New、Consolas、Source Code Pro 等。

monospace

（3）cursive 和 fantasy

cursive 是手写体，而 fantasy 是幻想体，两者看起来有点像。这 2 种类型过于 “奇特”，并不太适合在网页中使用。

手写体，看起来就像是毛笔或钢笔写出来的。对于中文来说，预设的手写体一般就是 “标楷体”。

幻想体，就是在手写体之上，多了一些装饰或纹路在字体上。对于中文环境下，计算机预设字体是不支持幻想体的，会自动使用 serif 或 sans-serif 代替。

cursive和fantasy

CSS 字体类型示例

接下来，我们通过几个简单的例子来讲解一下 CSS 如何定义字体类型。

示例 1：CSS 定义字体类型

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .div1 { font-family: Arial; }
        .div2 { font-family: "Times New Roman"; }
        .div3 { font-family: "微软雅黑"; }
    </style>
</head>
<body>
    <div class="div1">www.lvyenet.com（Arial）</div>
    <div class="div2">www.lvyenet.com（Times New Roman）</div>
    <div class="div3">www.lvyenet.com（微软雅黑）</div>
</body>
</html>

页面效果如下图所示。

CSS定义字体类型

分析：

对于 font-family 属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者中文的，则需要加上双引号。注意，这里的双引号是英文双引号，而不是中文双引号。

为了保证兼容性，在实际开发中建议使用中文字体的英文名称。例如使用 “Microsoft YaHei” 代替 “微软雅黑”，使用 “SimSun” 代替 “宋体”。

/* 推荐 */
font-family: "Microsoft YaHei ";

/* 不推荐 */
font-family: "微软雅黑";

示例 2：font-family 使用多种字体

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div { 
            font-family: Helvetica, Arial, "Microsoft YaHei", sans-serif;
        }
    </style>
</head>
<body>
    <div>绿叶网（www.lvyenet.com）</div>
</body>
</html>

页面效果如下图所示。

font-family使用多种字体

分析：

div { 
    font-family: Helvetica, Arial, "Microsoft YaHei", sans-serif;
}

对于上面这段代码，小伙伴们可能会感到疑惑：“为什么要为元素定义多种字体类型呢？” 其实原因是这样的：每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。

上面代码的意思是：div 元素优先使用 “Helvetica 字体” 来显示，如果你的电脑没有装 “Helvetica 字体”，那就接着考虑 “Arial 字体”。如果你的电脑还是没有装 “Arial 字体”，那就接着考虑 “Microsoft YaHei 字体”……以此类推。如果 Helvetica、Arial、"Microsoft YaHei" 这 3 种字体都没有安装，那么 div 元素就会采用预设的 sans-serif 无衬线字体来显示。

需要注意的是，font-family 的最后一个值必须是通用字体族（如 sans-serif 或 serif）。这是为了保证在所有指定字体都失效时，浏览器仍能通过通用分类选择一个合适的字体，而不是随便乱选。

Windows 和 Mac 都支持的字体

下面列出 Windows 和 Mac 都支持的字体。在实际项目开发中，使用这些字体不会有太多问题。

Windows和Mac都支持的sans-serif

Windows和Mac都支持的serif

Windows和Mac都支持的cursive

Windows和Mac都支持的monospace

Windows和Mac都支持的fantasy

现在的网页浏览很大一部分来自手机（iOS/Android）。像 Verdana、Tahoma、Comic Sans MS 这些字体在手机上通常是没有的。上面这些字体主要针对 PC 端（Windows/Mac）。移动端（iOS/Android）通常有自己的一套系统字体，一般我们只写 sans-serif 就会自动适配了。