Vue3项目中使用TailwindCSS引入本地字体不生效问题

问题核心原因 #

你的配置存在4处明显不匹配的错误，按优先级依次修复即可：

1. @font-face 中 font-family 属性错误填写了 fallback 字体，仅需填写字体名称即可
2. 字体格式声明错误，ttf 格式对应的标准 format 值为 truetype，不是 ttf
3. 字体样式、权重与实际文件不匹配：你引用的IBM字体是斜体文件、Inter字体是粗体文件，但@font-face中声明的是常规样式和常规权重
4. 本地字体优先级高于项目内文件，若设备本地安装了同名字体，会优先调用本地版本，可能和你的字体文件样式不一致

修复步骤 #

1. 修正 index.css 字体引入配置

/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* IBM Plex Sans 斜体400权重 */
  @font-face {
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 400;
    /* 去掉local声明强制使用项目内字体文件，需要调用本地版本再加回来 */
    src: url('../fonts/IBM_Plex_Sans/IBMPlexSans-Italic.ttf') format('truetype');
  }

  /* Inter 粗体700权重 */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/Inter/Inter-Bold.ttf') format('truetype');
  }

  /* 如果需要其他权重/样式的字体，单独新增@font-face声明对应文件即可 */
}

2. 修正 Tailwind 配置文件

// tailwind.config.js
module.exports = {
  // ...其他配置
  theme: {
    extend: {
      fontFamily: {
        ibmplexsans: ['"IBM Plex Sans"', 'sans-serif'], // 加fallback字体避免加载失败
        inter: ['"Inter"', 'sans-serif'],
      },
    },
  },
  // ...其他配置
};

3. 调整组件使用方式（匹配字体的权重和样式）

<!-- 调用IBM斜体400，对应你引入的字体文件 -->
<span class="font-ibmplexsans italic font-normal text-blue-600">publish</span>
<!-- 调用Inter粗体700 -->
<span class="font-inter font-bold">测试文本</span>

4. 路径问题排查（如果修复后仍有404报错）

如果用Vite构建，相对路径打包后可能出现解析错误，两种解决方式二选一：

• 把字体文件夹整体移到项目根目录的public目录下，把@font-face里的url改为/fonts/xxx/xxx.ttf绝对路径
• 在vite.config.js中配置assets资源解析规则，确保字体文件被正确打包到对应路径

验证方式 #

打开浏览器开发者工具：

• 网络面板筛选「字体」，确认字体文件请求成功无404
• 元素面板的「计算样式」标签，拉到最下方确认实际渲染使用的字体为你配置的字体

内容的提问来源于stack exchange，提问作者Ehrlich_Bachman