Vite Vue3 加载本地字体：全面指南，告别加载问题

2024-03-02 01:55:37

在 Vite Vue3 项目中加载本地字体：全面的指南

引言

在现代 Web 开发中，本地字体对于创建令人惊叹的用户界面至关重要。在 Vue3 项目中，Vite 构建工具提供了加载本地字体的便捷方式。然而，有时可能会遇到加载问题，例如字体加载失败或提示错误消息。本文旨在全面指导您在 Vite Vue3 项目中加载本地字体的过程，并提供解决常见问题的解决方案。

1. 在 main.scss 中加载字体

第一步是在您的 main.scss 文件中加载所需的字体。使用 @font-face 规则，如下所示：

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');
}

确保替换 'Opensans-Bold' 和 './fonts/OpenSans-Bold.ttf' 分别为您希望加载的字体系列和文件路径。

2. 在 vite.config.js 中加载 main.scss

接下来，您需要在 vite.config.js 文件中将 main.scss 加载到您的 Vue3 应用中。为此，使用 preprocessorOptions 选项，如下所示：

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/main.scss";`
      }
    }
  }
});

3. 检查文件路径

仔细检查 main.scss 中引用的字体文件路径。路径应相对于您的 assets/styles/fonts 目录。确保它正确无误。

4. 检查字体格式

确保您尝试加载的字体文件以受支持的格式存储，例如 TTF 或 WOFF。如果您不确定格式，请检查字体文件的后缀。

常见问题解答

1. 字体加载失败，提示“可下载字体：下载失败”

这通常是由于网络连接问题或字体文件本身损坏造成的。检查您的网络连接并尝试使用其他字体文件。

2. 控制台显示“找不到字体系列”

确保您在 @font-face 规则中使用了正确的字体系列名称。您可以在字体文件本身或字体库网站上找到该名称。

3. 字体重叠或显示不正确

检查字体文件是否损坏或格式不正确。您还可以尝试在 @font-face 规则中添加 font-weight 和 font-style 属性以覆盖默认值。

4. 字体重叠或显示不正确