跳转到内容

使用自定义字体

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

使用本地字体文件

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

这个例子将演示使用字体文件添加自定义字体 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. 安装你选择的字体的包。

    Terminal window
    npm install @fontsource/twinkle-star

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

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

    src/layouts/BaseLayout.astro
    ---
    import '@fontsource/twinkle-star';
    ---

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

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

在 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 中关于添加自定义字体系列的文档。

更多资源

段落标题 更多资源