html 怎么调用本地字体,css – 在webpack中使用本地Web字体

我正在尝试在我的React项目中使用一些本地Web字体.我将它们包含在我的main.scss文件中,并通过webpack加载它们.捆绑包构建正确,包括main.scss样式.我看到webpack加载了字体文件,并将它们复制到public / fonts /,但我的bundle文件找不到字体.

据我了解,你的@ font-face src应该与bundle的位置有关.我将此设置为与在webpack中加载字体的路径相同,’./ fonts /’.我看到的确切错误是：

file:///Users/myusername/Documents/folder1/folder2/folder3/APP/fonts/FoundersGroteskWeb-Regular.woff net::ERR_FILE_NOT_FOUND

我一直在尝试很多不同的路径配置,并且在webpack中使用了publicPath选项,但是我现在正在围绕看起来非常简单的引用错误.

文件结构：

APP

├──webpack.config.js

├──src

├──app

├──App.jsx

├──styles

├──main.scss

├──fonts

├──allthefonts.woff

├──public

├──bundle.js

├──fonts

├──allthefonts.woff

App.jsx：

require('./styles/main.scss');

main.scss：

@font-face {

font-family: FoundersGrotesk;

src: url('./fonts/FoundersGroteskWeb-Bold.eot') format('eot'),url('./fonts/FoundersGroteskWeb-Bold.woff') format('woff'),url('./fonts/FoundersGroteskWeb-Bold.woff2') format('woff2');

font-weight: bold;

}

@font-face {

font-family: FoundersGrotesk_Cnd;

src: url('./fonts/FoundersGrotXCondWeb-Bold.eot') format('eot'),url('./fonts/FoundersGrotXCondWeb-Bold.woff') format('woff'),url('./fonts/FoundersGrotXCondWeb-Bold.woff2') format('woff2');

font-weight: bold;

}

@font-face {

font-family: FoundersGrotesk;

src: url('./fonts/FoundersGroteskWeb-Regular.eot') format('eot'),url('./fonts/FoundersGroteskWeb-Regular.woff') format('woff'),url('./fonts/FoundersGroteskWeb-Regular.woff2') format('woff2');

font-weight: normal;

}

webpack.config.js：

'use strict';

const webpack = require('webpack');

const PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {

entry: './src/app/App.jsx',output: {

path: './src/public/',filename: PROD ? 'bundle.min.js' : 'bundle.js'

},module: {

loaders: [

{

test: /\.jsx?$/,loader: 'babel-loader',exclude: '/node_modules/',query: {

presets: ['es2015','react','stage-1']

}

},{

test: /\.s?css$/,loaders: ['style','css','sass']

},{

test: /\.(eot|svg|ttf|woff|woff2)$/,loader: 'file-loader?name=./fonts/[name].[ext]'

}

]

}

};