【CSS】谷歌字体使用指南

2026-03-24 09:42:22

目录:

Google Fonts 由 Google 提供的免费、开源字体库服务，于 2010 年上线，完全免费且可商用。

搜索字体

前往 Google Fonts，在顶部搜索框输入字体名称，回车后会进入字体展示页面。

往下拉可以看到字体的各种排版展示，粗体，细体，斜体，感觉没问题了可以点击右上角 Get font 按钮。

字体购物车

点击 Get font 按钮后会跳转到如下页面，可以看到出现了三个字体，刚才明明只搜索了一个字体，这是怎么回事？

这个网站做的类似于电商平台的购物车一样，之前搜索过的字体并且点击过 Get font 按钮都会默认加入”购物车”，当然你如果是第一次使用，那这里只会有一种字体。

左边每个字体旁边有一个垃圾桶小图标，建议删除不需要的字体。
为什么需要删除不需要的字体，在下一步在线使用字体中有解释原因。

左边每个字体的旁边还有一个 Variable 的文字，说明这是一种可变字体。

  • 传统字体: 如果你需要一款字体的常规（Regular）、加粗（Bold）和倾斜（Italic）版本，你必须下载并加载 3 个独立的文件;
  • 可变字体：你只需要下载 1 个文件，在下载时，文件名包含 [wght] 字样的通常是可变字体。

右边有两个按钮，对应字体的两种使用方式:

  • Get embed code: 需要联网在线使用字体，处于离线状态字体是不会生效的;
  • Download all: 下载字体源文件，可以做到离线使用字体。

在线使用字体

点击上一步的 Get embed code 按钮，会跳到新页面，可以看到如下图，可以将包含字体链接的 link 标签直接拷贝到 html 的 head 标签中，就可以使用字体了。

上一步出现了三个字体，所以下图的 link 标签中也会包含三个字体的引用，其实我需要的只有 Nunito Sans 字体，另外两个压根不需要，这也是为什么在上一步建议删除不需要的字体的原因。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

https://fonts.googleapis.com 这是存放 CSS 文件的服务器。
https://fonts.gstatic.com 这是真正存放字体源文件（.woff2 等）的服务器。

浏览器在下载网页时，通常要先解析完 HTML 和 CSS，才知道需要去哪个服务器拿字体。
加上这两行，浏览器会提前完成 DNS 查询、TCP 握手和 TLS 建立连接的过程。
有了它们，字体加载会更快，没有这两行，浏览器必须等到解析到具体的 @font-face 规则时才开始建立连接。这通常会增加 100ms 到 500ms 的延迟。

字体链接中的 ital, opsz, wght 是什么意思?

将 link 标签 href 值内容复制如下进行说明:

https://fonts.googleapis.com/css2?
family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&
family=Open+Sans:ital,wght@0,300..800;1,300..800&
family=Roboto:ital,wght@0,100..900;1,100..900&display=swap

这三个缩写对应的是 Variable Fonts（可变字体） 的核心控制轴。

  • ital: 斜体轴，控制字体是否为斜体。0 表示常规，1 表示斜体;
  • opsz: 光学尺寸轴，会根据字号大小自动微调字体的细节，如笔画粗细对比、间距等。opsz@6..72 表示该字体在 6px 到 72px 之间会有平滑的视觉优化;
  • wght: 粗细轴，控制字体的粗细。传统字体只有固定的 400、700 等，wght@300..700 表示你可以使用从 300（轻细）到 700（粗）之间的任何数值，例如 451。

字体链接中的 display=swap 是什么意思?

display=swap 是一个 CSS 参数，专门用来解决网页加载字体时的 “文字不可见” 问题。

如果没有 display=swap，在字体下载完成前，文字是隐形的，如果用户网络慢，可能要盯着空白页面看好几秒，即使文字内容其实已经加载好了。

有 display=swap，如果自定义字体还没下载完，先用系统默认字体顶上，等下载好了再换掉。用户进站能立刻看到内容，不会看到空白。

在线使用字体示例

引入链接，不需要手动写 @font-face，直接能用字体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000" rel="stylesheet">

    <style>
        .box {
            font-size: 80px;
            font-family: Nunito Sans;
            font-weight: 780;
        }
    </style>
</head>
<body>
    <div class="box">
        123456789
    </div>
</body>
</html>

离线使用字体

点击第二步图片右边的 Download all 按钮可以下载字体源文件，打开后有两个字体文件:

  • xxxx-VariableFont_wght.ttf: 文件名带 Variable 或轴名称
  • xxxx-Italic-VariableFont_wght.ttf: 带 Italic 字样

前面介绍 “可变字体” 的定义，一个文件就包含了字体粗细、倾斜。

这里只加载 xxxx-VariableFont_wght.ttf 设置斜体也是生效的，不过叫做 “伪斜体”。
浏览器找不到斜体文件，会强制将常规体的字符通过算法向右倾斜约 12 度。
真正的 “斜体” 往往会调整某些字母的结构（如小写字母 a、f、g），使其更接近手写感，增加阅读的韵律。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'Nunito Sans';
            font-weight: 100 900;
            font-style: normal;
            src: url('./fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') 
                format('truetype-variations');
            font-display: swap;
        }
        
        .box {
            font-size: 80px;
            font-family: 'Nunito Sans';
            font-weight: 400;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="box">
        123456789
    </div>
</body>
</html>

目前的字体技术通常将 “常规(Roman)” 和 “斜体(Italic)” 分为两个独立的可变文件。(好矛盾😰)

如果希望不是 “伪斜体”，是真正的 “斜体”，还需要加载 xxxx-Italic-VariableFont_wght.ttf 文件。

离线使用字体示例

实际开发中，两个文件都加载即可:

  • 两个 @font-face 都叫 ‘Nunito Sans’。这样当写 font-style: italic 时，浏览器会自动去调用那个带 Italic 的文件，而不是简单的把直立字体 “拉斜”;
  • format(‘truetype-variations’) 这是专门针对 TTF 格式的可变字体 的声明（如果是 WOFF2 则是 woff2-variations），能让浏览器更好地识别它的动态属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'Nunito Sans';
            font-weight: 100 900;
            font-style: normal;
            src: url('./fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') 
                format('truetype-variations');
            font-display: swap;
        }

        @font-face {
            font-family: 'Nunito Sans';
            font-weight: 100 900;
            font-style: italic;
            src: url('./fonts/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght.ttf') 
                format('truetype-variations');
            font-display: swap;
        }
        
        .box {
            font-size: 80px;
            font-family: 'Nunito Sans';
            font-weight: 400;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="box">
        123456789
    </div>
</body>
</html>

TTF 和 WOFF2 区别?

TTF (TrueType Font)：原始字体格式，没有经过针对网络的压缩。文件体积通常较大（比如 100KB）。

WOFF2 (Web Open Font Format 2.0)：采用了更高级的 Brotli 压缩算法，体积通常比 TTF 小 30% 到 50%（同样的字体可能只需 50KB）。这能显著加快网页加载速度。

在网页开发中，优先使用 WOFF2 是行业标准。在本机如 Photoshop、Word、Figma 等软件中优先使用 TTF。

↶ 返回首页 ↶

本文总阅读量  次
皖ICP备17026209号-3
总访问量: 
总访客量: