Html 如何在使用webpack时加载css中的字体？

我的项目目录的相关部分如下所示：

root    
  --src      
    --js    
    --styles    
      --less
        --main.less
      --fonts
        --Pixelated.tff
  --webpack.config.js

这是我的

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/js'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: [ 'babel' ],
      exclude: /node_modules/,
      include: __dirname
    }, {
      test: /\.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
    },
    {test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }]
  }
};

在main.less中，这是相关的@font-face部分：

@font-face {
  font-family: 'Pixelated';
  src: url('../fonts/Pixelated.ttf');
}

我在webpack加载器上尝试了几种变体，但没有发现github的各种问题。我也尝试过使用我的

tff

font文件的绝对路径来证明概念，但这也不起作用，我想这一定与我的网页设置有关

改变你的想法

 {
      test: /\.less?$/,
      loaders: [ 'style', 'css', 'less' ],
      include: __dirname
  },

到

---

它应该可以工作，main.css文件是一个css文件，您需要为该类型的文件使用适当的加载程序

你试过文件加载器了吗：{test://\（ttf | eot | svg）（\？v=[0-9]\.[0-9]\.[0-9]）？$/，加载器：“文件加载器”}，是的，我发现

模块未找到：错误：无法解析“文件”或“目录”../fonts/Pixelated.tff

在构建上你能提供一段代码来扔github或其他类似的东西吗。webpack.config.js位于何处？它位于项目根目录下-还有什么其他代码可能会有所帮助？我在OP中有我的css和网页包配置的相关部分-不确定这个问题可能来自我的代码库中的其他地方我确实可以。对于浏览器洞察，以及（相当多！）将

ttf

转换为

woff

文件的免费方式。ttf/otf是通用的OpenType字体（用于字母形状的矢量语言；truetype矢量与type2矢量之间的区别），将它们转换为WOFF可以优化它们在web上的使用，同时也让浏览器清楚地知道该字体是用于web的，而不仅仅是“我发现的随机字体”（当然不总是真的=）我以前应该提过，在问这个问题的过程中，我最终改成了.less。main.css现在是main.lessI为我做了一个小项目，如果它是一个较少的文件，那么你的配置应该按原样工作：我在src/js中创建了一个main.js文件，需要加载.ttfHm的main.less，我看不出有什么实质性的区别。我不知道这个问题是否在别的地方。谢谢你的努力，我真的很感激

{
    test: /(\.less|\.css)$/,
    loaders: [ 'style', 'css', 'less' ],
}