font-face 不适用于汇总配置 - 组件库

Question

我有用 React 编写的自定义组件库（汇总构建）。我不想在外部项目中使用 createglobalstyle BCS 破坏性能。我添加了带有 font-face （相对路径）的 CSS 文件，但这些字体在外部项目中不起作用。你知道如何修复它吗？源代码

• 组件（文件夹）

• 索引.css 与

  @font-face { 字体系列：'font1'; 字体显示：交换；字体粗细：900；src: url(assets/fonts/font1/heavy/heavy.woff2) } h1{ 边距: 2.75rem 0 1.05rem; 字体系列：'font1'；字体粗细：400；行高：1.15；红色; }

Rollupconfig 插件：

[    postcss({
        extract: false,
        plugins: [autoprefixer]
    }),
    babel({
        exclude: 'node_modules/**'
    }),
    localResolve(),
    resolve({
        browser: true
    }),
    commonjs(),
    filesize(),
    copy({
        targets: [{ src: 'src/assets', dest: 'build' }]
    }),
    url({
        // by default, rollup-plugin-url will not handle font files
        include: ['**/*.woff', '**/*.woff2'],
        // setting infinite limit will ensure that the files 
        // are always bundled with the code, not copied to /dist
        limit: Infinity
      }),
      modulepreload({
        prefix: 'fonts',
        index: 'src/assets/fonts/font1/heavy/heavy.woff2',
      })

]; 

当我在外部项目中使用该库时，我看到所有样式，如颜色：红色等，但字体不起作用:(

Answer 1

我感觉您刚刚错误地输入了字体来源。

尝试这样的事情：

@font-face { 
font-family: 'font1';
font-display: swap;
font-weight: 900;
src: url("../assets/fonts/font1/heavy/heave.woff2");

}