使用Tailwind CSS无法加载本地字体的问题求助

云原生阿岚

2026-7-13

解决Tailwind CSS本地字体加载失败（无网络请求）的问题

核心问题分析

你遇到的情况是字体文件未被发起加载请求，大概率是字体路径配置错误，加上格式声明有误，导致浏览器直接忽略了@font-face规则。

分步修复方案

1. 修正@font-face的路径与格式声明

你的styles.css中，字体路径用了绝对路径/fonts/...，但Vite环境下src目录内的资源需要用相对路径或者你配置的@别名；同时OTF字体的format值应该是"opentype"而非"otf"，浏览器无法识别后者。

修改后的styles.css：

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

@layer base {
    @font-face {
        font-family: "Metropolis";
        src: url("./fonts/Metropolis-Regular.otf") format("opentype");
        /* 也可以用你配置的@别名 */
        /* src: url("@/fonts/Metropolis-Regular.otf") format("opentype"); */
        font-weight: normal;
        font-style: normal;
    }
}

2. 确认字体类名已实际使用

Tailwind是按需生成样式的，如果你的代码中没有用到font-metropolis这个自定义类，对应的字体规则不会被打包，自然不会发起加载请求。

在组件中添加类名验证，比如：

<div className="font-metropolis">测试Metropolis字体显示</div>

3. 补充Vite资源类型配置（可选）

如果使用别名路径仍有问题，可以在vite.config.ts中显式声明字体文件类型，确保Vite能正确解析：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: './src' }]
  },
  assetsInclude: ['**/*.otf']
})