使用自定义字体

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

使用本地字体文件

段落标题 使用本地字体文件

这个例子将演示使用字体文件添加自定义字体 DistantGalaxy.woff。

1. 添加你的字体文件到 public/fonts/ 目录。

2. 将以下@font-face 语句添加到你的CSS中。它可以位于你引入的全局 .css 文件，或在<style is:global> 块中， 也可以是你想要使用字体的特定布局或组件中的 <style> 块中。

   /* 注册你的自定义字体并告诉浏览器它在哪里 */
   @font-face {
     font-family: 'DistantGalaxy';
     src: url('/fonts/DistantGalaxy.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
   }

3. 使用 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（字体资源包）项目简化了使用 Google Fonts 和其他开源字体的使用。它提供了 npm 模块，你可以为要使用的字体安装。

1. 从 Fontsource 的目录中找到你想用的字体。此例子将选择 Twinkle Star字体。

2. 安装你选择的字体的包。

   npm

   npm install @fontsource/twinkle-star

   pnpm

   pnpm add @fontsource/twinkle-star

   Yarn

   yarn add @fontsource/twinkle-star

   提示

   你可以在 Fontsource 网站上每个字体页面的“快速安装”部分找到正确的包名称。包名总是以 @fontsource/ 或 @fontsource-variable/ 字体名称开头。

3. 在要使用字体的布局或组件中导入字体包。通常，需要在通用布局组件中执行此操作，以确保该字体在你的网站上可用。

   导入（import）将自动添加 @font-face 以设置字体所需的必要属性。

   src/layouts/BaseLayout.astro

   ---
   import '@fontsource/twinkle-star';
   ---

4. 使用字体名称作为 font-family 值，正如 Fontsource 网站中的例子所示。这适用于任何可以在 Astro 项目中编写 CSS 的地方。

   h1 {
     font-family: "Twinkle Star", cursive;
   }

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

在 Tailwind 中注册字体

段落标题 在 Tailwind 中注册字体

如果你使用的是 Tailwind 集成，则可以使用此页面的前述方法之一来安装字体，并进行一些修改。你也可以使用@font-face 语句注册本地字体，或使用 Fontsource 的 import 策略去安装你的字体。

要在 Tailwind 中注册你的字体：

1. 请遵循上述任一指南，但跳过添加 font-family 到 CSS 的最后一步。

2. 将字体名称添加到 tailwind.config.mjs。

   此示例将添加 Inter 到 sans-serif 字体堆栈，并使用 Tailwind CSS 的默认备用字体。

   tailwind.config.mjs

   import defaultTheme from 'tailwindcss/defaultTheme'
   
   /** @type {import('tailwindcss').Config} */
   export default {
     content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
     theme: {
       extend: {
         fontFamily: {
           sans: ['Inter', ...defaultTheme.fontFamily.sans],
         },
       },
     },
     plugins: [],
   }

   现在，项目中的所有 sans-serif 文本（Tailwind 的默认设置）都将使用你选择的字体，并且该类 font-sans 也将应用 Inter 字体。

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

更多资源

段落标题 更多资源

• 在 MDN 的网站字体指南 中了解网站字体的工作原理。
• 使用 Font Squirrel 的 Webfont Generator为你的字体生成 CSS。