Laravel Mix + TailwindCSS本地字体加载异常及类缺失求助

1. 检查@font-face的字重与文件映射 #

确保resources/css/app.css里的@font-face规则精准对应JetBrains Mono的各个字重，每个字重的font-weight值不能错配：

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'),
         url('../fonts/JetBrainsMono-Regular.woff') format('woff');
    font-weight: 400; /* Regular对应400 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2'),
         url('../fonts/JetBrainsMono-Medium.woff') format('woff');
    font-weight: 500; /* Medium对应500 */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2'),
         url('../fonts/JetBrainsMono-Bold.woff') format('woff');
    font-weight: 700; /* Bold对应700 */
    font-style: normal;
    font-display: swap;
}

/* 若需要Light、SemiBold这类额外字重，补充对应规则 */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Light.woff2') format('woff2'),
         url('../fonts/JetBrainsMono-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

2. 完善Tailwind配置的字体族与字重 #

在tailwind.config.js里，除了扩展fontFamily，还要确保需要的字重被Tailwind识别（默认字重仅包含400、500、700）：

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                mono: ['JetBrains Mono', 'monospace'],
                // 也可以单独命名为jetbrains: ['JetBrains Mono', 'monospace']，按需选择
            },
            // 添加默认之外的字重配置
            fontWeight: {
                light: 300,
                semibold: 600,
            },
        },
    },
    plugins: [],
}

3. 处理Tailwind的Tree Shaking机制 #

Tailwind默认只编译模板中实际使用的类，如果代码里没用到font-light、font-semibold这类类，编译后的app.css就不会生成它们。解决方式二选一：

• 在模板中直接使用目标类，比如给元素加class="font-light font-mono"
• 在tailwind.config.js中配置safelist强制生成所需类：

module.exports = {
    // ...其他配置
    safelist: [
        'font-light',
        'font-semibold',
        // 按需添加其他需要的字重类
    ],
}

4. 验证Webpack Mix的字体复制规则 #

确认webpack.mix.js的复制规则覆盖了所有JetBrains Mono字体文件：

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ])
    .copy('resources/fonts/**/*', 'public/fonts'); // 复制所有字体文件到public/fonts

执行npm run dev或npm run prod后，检查public/fonts目录下是否存在所有需要的字体文件。

最后测试 #

重新编译资源：

npm run dev

在模板中添加测试代码：

<p class="font-mono font-light">JetBrains Mono Light 测试</p>
<p class="font-mono font-semibold">JetBrains Mono SemiBold 测试</p>

刷新页面验证字体渲染效果。

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