本站点在使用远程字体时的注意点

归档13

Firefly6 ACGN2 Tinkering2 Career1 Goods1 Web1

279 字

1 分钟

本站点在使用远程字体时的注意点

2026-07-20

Firefly

firefly

font

悠哉体（Yozai）没有在 Google Fonts 上,但国内有专门针对开源中文字体进行托管的 “中文网字计划”.可以直接通过远程 CDN 链接引入.

这里用到jsDelivr CDN: https://cdn.jsdelivr.net/npm/@chinese-fonts/yozai/dist/Yozai-Medium/result.css

这里面用了字体分片,将整个悠哉体拆分成了上百个几十 KB 的小字体分片浏览器在加载网页时,会分析当前网页里有哪些汉字浏览器只会下载包含这些已出现汉字的小分片,而不会下载整个字体包(真方便我抄,太聪明了)

步骤一: 在布局中添加远程 CDN 链接#

打开src/layouts/Layout.astro
在<head>标签内(在<FontSetup /> 上方),引入悠哉体的 CDN CSS 链接

1
<!-- 引入远程悠哉体 CSS 链接 -->
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@chinese-fonts/yozai/dist/Yozai-Medium/result.css" />
3
<FontSetup />

步骤二: 在 CSS 中使用它#

我们只需修改项目中的样式文件src/styles/banner-title.css

1
.banner-title {
2
    ...
3
    /* 首选悠哉体， fallback 回退到原本配置的字体变量 */
4
    font-family: "Yozai", var(--font-banner-title, inherit);
5
}
6

7
.banner-subtitle {
8
    ...
9
    /* 首选悠哉体， fallback 回退到原本配置的字体变量 */
10
    font-family: "Yozai", var(--font-banner-subtitle, inherit);
11
}