使用自定义字体

本指南将向你展示如何将网页字体添加到你的项目中，并在你的组件中使用它们。

使用本地字体文件

本示例将演示如何使用字体文件 DistantGalaxy.woff 添加自定义字体。

将你的字体文件添加到 public/fonts/。

将下面的 @font-face 声明添加到你的 CSS 中。可以是在你导入的全局 .css 文件中，也可以是在 <style is:global> 块中，或者在你想要使用此字体的特定布局或组件的 <style> 块中。

/* Register your custom font family and tell the browser where to find it. */
@font-face {
  font-family: 'DistantGalaxy';
  src: url('/fonts/DistantGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

使用 @font-face 声明中的 font-family 值来为组件或布局中的元素设置样式。在本例中，<h1> 标题将应用自定义字体，而段落 <p> 则不会。
src/pages/example.astro
```
---
---

<h1>In a galaxy far, far away...</h1>

<p>Custom fonts make my headings much cooler!</p>

<style>
h1 {
  font-family: 'DistantGalaxy', sans-serif;
}
</style>
```

使用 Fontsource

Fontsource 项目简化了 Google 字体和其他开源字体的使用。它为你想要使用的字体提供了可以安装的 npm 模块。

在 Fontsource 的目录中找到你想要使用的字体。本示例将使用 Twinkle Star。
安装你所选字体的包。
- npm
- pnpm
- Yarn
终端窗口
npm install @fontsource/twinkle-star
终端窗口
pnpm add @fontsource/twinkle-star
终端窗口
yarn add @fontsource/twinkle-star
你可以在 Fontsource 网站上每个字体页面的“快速安装”部分找到正确的包名。它将以 @fontsource/ 或 @fontsource-variable/ 开头，后跟字体名称。
在你想要使用字体的组件中导入字体包。通常，你会希望在一个通用的布局组件中执行此操作，以确保字体在整个网站中都可用。

导入操作将自动添加设置字体所需的 @font-face 规则。
src/layouts/BaseLayout.astro
```
---
import '@fontsource/twinkle-star';
---
```
将其 Fontsource 页面上 body 示例中显示的字体名称用作 font-family 值。这将在你的 Astro 项目中任何可以编写 CSS 的地方生效。
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

为了优化你网站的渲染时间，你可能需要预加载对于初始页面显示至关重要的字体。更多信息和用法，请参阅 Fontsource 的预加载字体指南。

在 Tailwind 中注册字体

如果你正在使用 Tailwind，你可以使用本页前面的任一方法来安装字体，但需要一些修改。你可以为本地字体添加 @font-face 声明，或使用 Fontsource 的 import 策略来安装字体。

在 Tailwind 中注册你的字体

遵循上述任一指南，但跳过最后一步向 CSS 添加 font-family。
将字体名称添加到 src/styles/global.css 中。

此示例将 Inter 添加到 sans-serif 字体栈中。
src/styles/global.css
```
@import 'tailwindcss';

@theme {
  --font-sans: 'Inter', 'sans-serif';
}
```
现在，你项目中所有的 sans-serif 文本（Tailwind 的默认设置）都将使用你选择的字体，并且 font-sans 类也将应用 Inter 字体。

有关更多信息，请参阅 Tailwind 关于添加自定义字体族的文档。