使用自定义字体

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

这个例子将演示使用字体文件添加自定义字体 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>。

   ---
   ---
   
   <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. 安装你选择的字体的包。

   npmpnpmYarn

   npm install @fontsource/twinkle-star

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

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

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

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

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

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

要在 Tailwind 中注册你的字体：

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

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

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

   const defaultTheme = require("tailwindcss/defaultTheme");
   
   module.exports = {
     // ...
     theme: {
       extend: {
         fontFamily: {
           sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
         },
       },
     },
     // ...
   };

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

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

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