跳转到内容

使用自定义字体

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

使用本地字体文件

这个例子将演示使用字体文件添加自定义字体 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 集成,则可以使用此页面的前述方法之一来安装字体,并进行一些修改。你也可以使用@font-face 语句注册本地字体,或使用 Fontsource 的 import 策略去安装你的字体。

要在 Tailwind 中注册你的字体:

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

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

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

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

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

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

更多资源