使用 Webpack 和 font-face 加载字体 [英] Load fonts with Webpack and font-face
本文介绍了使用 Webpack 和 font-face 加载字体的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用 @font-face
在我的 CSS 文件中加载字体,但字体从未加载.这是我的目录结构.
I'm trying to load a font in my CSS file using @font-face
but the font never loads. This is my directory structure.
然后在 webpack.config.js
我有加载器来获取字体.
Then in webpack.config.js
I have the loader to get fonts.
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
"./index.js"
],
output: {
path: __dirname+"/build",
filename: "main.js"
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{ test: /.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
{ test: /.svg$/, loader: "raw" },
{ test: /.css$/, loader: "style-loader!css-loader" },
{ test: /.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}
]
}
};
在我的 CSS 文件中,我有这个:
Inside my CSS file I have this:
@font-face {
font-family: 'Darkenstone';
src: url('./Darkenstone.woff') format('woff');
}
body {
background-color: green;
font-size: 24px;
font-family: 'Darkenstone';
}
最后,我在 index.js
中调用我的 CSS 文件:
Finally, I'm calling my CSS file in my index.js
with:
import './src/css/master.css';
一切正常,但字体永远不会加载.
Everything works but de font never loads.
推荐答案
在尝试了很多东西之后,下一个加载器完成了工作.我使用 url-loader 代替了 file-loader .您需要安装 url-loader.
After trying a lot of stuff the next loader made the work. Instead of file-loader, I used url-loader . You need url-loader installed.
{ test: /.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
这篇关于使用 Webpack 和 font-face 加载字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文