在使用 TailwindCSS 的 Vue 3 CLI 项目中集成自定义字体

自定义字体是增强 Vue 3 应用视觉吸引力和独特性的好方法。让我们深入了解如何在使用 TailwindCSS 的 Vue 3 CLI 项目中安装像 "Inter" 这样的自定义字体。

下载字体文件

首先，下载 "Inter" 字体文件。你可以从 Google Fonts 或直接从 Inter 字体网站获取。确保你有 .woff 和 .woff2 格式的字体文件，以获得更好的压缩和更快的加载时间。其他常见的格式有 ttf、otf、eot 和 svg。

将字体添加到项目中

下载完成后，将字体文件放在 Vue 3 项目的 src/assets/fonts 目录下。创建一个专门的 fonts 文件夹有助于保持资源的组织性。

选择正确的字体格式

在设置 @font-face 时，为字体文件指定正确的格式非常重要：

.woff 文件：使用 format('woff')
.woff2 文件：使用 format('woff2')
.ttf 文件：使用 format('truetype')
.otf 文件：使用 format('opentype')
.eot 文件：使用 format('embedded-opentype')
.svg 文件：使用 format('svg')

这样可以确保浏览器识别并加载适当的字体类型。

在 TailwindCSS 中定义字体

TailwindCSS 允许你直接在主 tailwind.css 文件中放置 @font-face 规则。以下是如何在 @layer base 指令中定义 "Inter" 字体：

css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Inter';
    src: url('@/assets/fonts/Inter-Regular.woff2') format('woff2'), url('@/assets/fonts/Inter-Regular.woff')
        format('woff');
    font-weight: 400;
    font-style: normal;
  }
  // ... 包括你需要的所有字体粗细和样式
}

@/ 是你的 src 目录的别名，Vite（Vue 3 的构建工具）会正确解析它。

你还可以包含 font-display: swap，以确保在字体加载期间文本仍然可见。

更新 Tailwind 配置

TailwindCSS 使用配置文件来自定义其默认设置。扩展你的 tailwind.config.js 以包含 "Inter" 字体：

javascript

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
      },
    },
  },
};

这段代码将 "Inter" 设置为项目的默认无衬线字体。

在组件中使用字体

现在，你可以在 Vue 组件中像这样使用字体：

html

<template>
  <div class="font-sans">这是使用 Inter 字体。</div>
</template>

font-sans 类现在对应于 "Inter" 字体，将其应用于 div 内的文本。

构建和测试

运行 Vue 应用以查看更改：

bash

npm run serve

检查你的应用以确保应用了 "Inter" 字体。你可能需要清除浏览器缓存或执行硬刷新才能看到新字体。

结论

恭喜你！你已经成功地将自定义字体集成到 Vue 3 和 TailwindCSS 项目中。通过遵循这些步骤，你可以使用 "Inter" 字体或任何其他你选择的字体为应用注入更多个性。记住，成功集成的关键在于正确组织字体文件并在 Tailwind 设置中进行正确配置。

在使用 TailwindCSS 的 Vue 3 CLI 项目中集成自定义字体 ​

下载字体文件 ​

将字体添加到项目中 ​

选择正确的字体格式 ​

在 TailwindCSS 中定义字体 ​

更新 Tailwind 配置 ​

在组件中使用字体 ​

构建和测试 ​

结论 ​