我正在尝试在我的 scss 文件中使用 @font-face 声明。
正在应用正确的 CSS 规则,因此 font-face 声明看起来不错。路径也正在得到解决,所以这没有问题。而且,webpack 不会抛出任何错误,因此它似乎不是任何类型的加载程序问题。但最终,字体仍然没有被浏览器渲染。 (see image)
从 Webpack 5 开始,the documentation声明您可以在规则中声明“类型:'asset/resource'”以正确加载诸如字体或图像之类的 Assets 。它适用于我加载的图像,但不适用于字体。
CSS:
@font-face {
font-family: 'Yusei Magic', sans-serif;
font-style: normal;
font-weight: 400;
src: url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')
format('truetype');
}
网络包配置:module: {
...
rules: [
...
{
test: /\.ttf$/,
type: 'asset/resource',
},
],
},
最佳答案
由于字体被css函数url()
引用,也需要添加负责的 Webpack 加载器。
如果没有安装:
npm install --save-dev style-loader css-loader
规则堆栈应如下所示: rules: [
...
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
...
]
详情可查看here (loading-css)和 here (loading-fonts) .css-loader
翻译@import
和 url()
喜欢 import/require()
并将解决它们。
关于javascript - Webpack 5字体 Assets 问题,没有错误但也没有字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66143454/