要从node_modules
加载字体文件(如OTF文件),你可以使用Webpack的file-loader
或url-loader
来处理这些文件。以下是具体步骤:
首先,确保你已经安装了Webpack和相关的loader:
npm install webpack webpack-cli file-loader url-loader --save-dev
在你的Webpack配置文件(通常是webpack.config.js
)中,添加对字体文件的处理规则:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(otf|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
}
};
在你的JavaScript或CSS文件中,你可以这样引用字体文件:
@font-face {
font-family: 'MyFont';
src: url('~path/to/your/font-file.otf') format('opentype');
}
注意:~
符号告诉Webpack去node_modules
目录下查找文件。
import fontFile from 'path/to/your/font-file.otf';
const fontFace = new FontFace('MyFont', `url(${fontFile})`);
document.fonts.add(fontFace);
假设你有一个字体文件MyFont.otf
在node_modules/some-package/fonts/
目录下,你可以这样使用:
@font-face {
font-family: 'MyFont';
src: url('~some-package/fonts/MyFont.otf') format('opentype');
}
import fontFile from 'some-package/fonts/MyFont.otf';
const fontFace = new FontFace('MyFont', `url(${fontFile})`);
document.fonts.add(fontFace);
通过以上步骤,你可以从node_modules
加载字体文件并在你的项目中使用它们。
领取专属 10元无门槛券
手把手带您无忧上云