24. 网络字体

本节目标：掌握 @font-face 规则自定义字体，了解常见字体格式，学会接入 Google Fonts 等网络字体服务。

为什么需要网络字体

传统 CSS 只能用用户电脑里安装的字体。如果用户的系统没有你指定的字体，就会回退到默认字体，设计效果大打折扣。

网络字体解决了这个问题。你可以把字体文件放在服务器上，用户访问页面时自动下载，确保每个人看到的都是你想要的效果。

@font-face 基本用法

@font-face 最早在 CSS2 (1998) 中定义，后来被纳入 CSS3 字体模块，是现代 Web 字体的核心技术，用来定义一个自定义字体。

@font-face {
    font-family: 'MyFont';          /* 给字体起个名字 */
    src: url('fonts/myfont.woff2') format('woff2'),  /* 优先加载 woff2 */
         url('fonts/myfont.woff') format('woff');    /* 回退到 woff */
    font-weight: normal;            /* 声明这个文件是常规字重 */
    font-style: normal;             /* 声明这个文件是常规样式 */
}

/* 使用自定义字体 */
body {
    font-family: 'MyFont', sans-serif;
}

font-family 是自己取的名字，跟文件名没关系。src 指向字体文件的路径，可以是相对路径或绝对路径。

字体格式一览

不同浏览器支持的字体格式不一样，通常需要提供多种格式。

格式	扩展名	说明
WOFF2	.woff2	压缩率最高，现代浏览器都支持
WOFF	.woff	压缩良好，兼容性最好
TTF	.ttf	未压缩，文件较大
OTF	.otf	类似 TTF，支持更多特性
EOT	.eot	IE 专用格式，现在基本不需要

实际开发中，提供 WOFF2 和 WOFF 两种格式就够了。

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont.woff2') format('woff2'),
         url('fonts/myfont.woff') format('woff');
}

format() 帮助浏览器判断是否支持该格式。浏览器会加载第一个支持的格式，跳过不支持的。

定义粗体和斜体

同一个字体家族通常有多个字重和样式，需要分别声明。

/* 常规体 */
@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 粗体 */
@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* 斜体 */
@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

使用时，浏览器会根据 font-weight 和 font-style 自动匹对应的字体文件。

h1 {
    font-family: 'MyFont', sans-serif;
    font-weight: bold;    /* 自动加载 bold 字体文件 */
}

em {
    font-family: 'MyFont', sans-serif;
    font-style: italic;   /* 自动加载 italic 字体文件 */
}

多字重字体

如果需要更精细的字重控制，可以用数字指定。

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-light.woff2') format('woff2');
    font-weight: 300;  /* 细体 */
}

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-regular.woff2') format('woff2');
    font-weight: 400;  /* 常规 */
}

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-bold.woff2') format('woff2');
    font-weight: 700;  /* 粗体 */
}

font-weight 常用值：300（细）、400（常规）、700（粗）。必须跟 @font-face 里声明的一致，否则浏览器会近似渲染。

Google Fonts 快速接入

Google Fonts 是最流行的免费网络字体服务，不需要自己托管字体文件。

方法一：通过 link 标签

<!DOCTYPE html>
<html>
<head>
    <!-- 引入 Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
    </style>
</head>
<body>
    <h1>使用 Google Fonts 的页面</h1>
    <p>这段文字使用了思源黑体。</p>
</body>
</html>

方法二：通过 @import

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

body {
    font-family: 'Noto Sans SC', sans-serif;
}

link 方式比 @import 性能更好，因为 @import 会阻塞页面渲染。推荐优先使用 link。

选择字重和样式

Google Fonts URL 中可以指定需要的字重，减少加载体积。

/* 只加载 400 和 700 两个字重 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* 加载斜体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,400&display=swap');

字体加载优化

网络字体文件通常比较大，加载不当会导致页面闪烁或长时间显示空白。

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;  /* 先显示后备字体，加载完再切换 */
}

font-display 常用值：

swap：先显示系统字体，自定义字体加载完后切换
fallback：短暂空白后显示系统字体，加载完再切换
optional：可选加载，如果网络慢就不加载了

推荐使用

，避免用户长时间看到空白文字。

unicode-range 按需加载

如果字体文件包含多种语言的字符，可以用 unicode-range 只加载需要的字符范围。

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF;  /* 只加载拉丁字符 */
}

@font-face {
    font-family: 'MyFont';
    src: url('fonts/myfont-cjk.woff2') format('woff2');
    unicode-range: U+4E00-9FFF;  /* 只加载中文字符 */
}

这样浏览器会根据页面内容按需下载，减少不必要的流量消耗。

小结

@font-face 自定义字体，font-family 起名，src 指向字体文件
提供 WOFF2 和 WOFF 两种格式就够了，WOFF2 优先
不同字重/样式需要分别声明 @font-face
Google Fonts 用 link 标签接入，比 @import 性能更好
font-display: swap 避免加载时显示空白
unicode-range 按需加载字符，减少流量