如何解决字体不能与汇总配置一起使用-组件库
我有用React编写的自定义组件库(要构建的汇总)。我不想在外部项目中使用createglobalstyle BCS破坏性能。我添加了带有字体面(相对路径)的CSS文件,但是这些字体在外部项目中不起作用。你知道如何解决吗? src
-
组件(文件夹)
-
index.css与
@ font-face { font-family:'font1'; 字体显示 字体粗细:900; src:url(assets / fonts / font1 / heavy / heavy.woff2) } h1 { 边距:2.75rem 0 1.05rem; font-family:'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',})
];
当我在外部项目中使用该库时,我看到所有样式,例如color:red等,但是font-face无法正常工作:(
解决方法
我觉得您只是错误输入了字体的来源。
尝试这样的事情:
@font-face {
font-family: 'font1';
font-display: swap;
font-weight: 900;
src: url("../assets/fonts/font1/heavy/heave.woff2");
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。