Vite中导入Fontsource子集字体异常问题求助

这不是Vite的Bug，而是生产构建阶段CSS优化工具（cssnano）的默认行为导致的：

• 你导入的两个子集CSS文件中，@font-face规则的font-family均为'Inter'，其余属性（字体权重、样式）也一致，仅unicode-range和src不同。
• Vite生产构建时会调用cssnano压缩CSS，其默认配置会合并同名font-family且权重/样式一致的@font-face规则，只保留最后一个导入的规则，导致前面的子集被覆盖。
• 开发环境未启用cssnano的合并优化，因此两个子集都能正常生效。

解决方法 #

方法1：禁用cssnano的font-face合并优化

在vite.config.js中调整PostCSS配置，关闭cssnano的mergeFontFaces选项，避免合并同名的@font-face规则：

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

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        require('cssnano')({
          preset: ['default', {
            mergeFontFaces: false
          }]
        })
      ]
    }
  }
})

调整后，构建后的CSS会保留两个子集的@font-face规则，浏览器会根据unicode-range自动加载对应字符的字体文件。

方法2：手动合并两个子集的@font-face规则

创建自定义SCSS文件，将两个子集的字体源和unicode-range合并为一个@font-face规则，避免重复的font-family冲突：

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: 
    url('@fontsource/inter/files/inter-latin-400-normal.woff2') format('woff2'),
    url('@fontsource/inter/files/inter-latin-ext-400-normal.woff2') format('woff2');
  // 合并latin和latin-ext的unicode范围
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body, html {
  font-family: 'Inter', sans-serif;
}

之后在项目中导入这个自定义文件即可，这种方式既不会产生体积冗余，也能确保所有子集字符正常显示。

方法3：使用Fontsource的子集组合导入（推荐）

Fontsource支持通过+符号组合多个子集导入，直接导入合并后的CSS文件：

@import '@fontsource/inter/latin+latin-ext.css';

body, html {
  font-family: 'Inter';
}

这种方式无需手动配置，Fontsource会自动生成包含两个子集的@font-face规则，避免Vite构建时的合并问题。

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