使用 webpack 时如何在 css 中加载字体？答案

【问题标题】：How to load fonts in css while using webpack?使用 webpack 时如何在 css 中加载字体？
【发布时间】：2016-02-04 21:45:53
【问题描述】：

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

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 字体文件的绝对路径来证明概念，但这也不起作用，我想这一定与我的 webpack 设置有关。

【问题讨论】：

您是否尝试过文件加载器：{test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0 -9])?$/, loader: "file-loader" },
是的，我正在构建 Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/Pixelated.tff
你能不能提供一段你的代码扔 github 或者其他的来玩有点难说。 webpack.config.js 在哪里？
它位于项目根目录 - 还有什么其他代码可能有帮助？我在 OP 中有我的 css 和 webpack 配置的相关部分 - 不确定我的代码库中的其他地方这个问题可能来自
我确实可以。 caniuse.com/#search=woff 用于浏览器洞察力，google.ca/search?q=convert+ttf+to+woff 用于（相当多！）将ttf 转换为woff 文件的免费方法。 ttf/otf 是通用的 OpenType 字体（用于字母形状的矢量语言之间的区别；truetype 向量与 type2 向量），将它们转换为 WOFF 可以优化它们以在 Web 上使用，同时也让浏览器清楚字体是意图用于网络，而不仅仅是“我发现的随机字体”（当然并不总是如此=）

标签： html css fonts font-face webpack

【解决方案1】：

改变你的

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

到

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

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

【讨论】：

我之前应该提到过，我在问这个问题的过程中最终改成了 .less 。 main.css 现在是 main.less
我为我做了一个小项目，如果它是一个 less 文件，你的配置应该按原样工作：dropbox.com/sh/kwfcfbuq0spc2ew/AADxYK4Sql3kw5Q7UcBv1E-Ua/… 我在 src/js 中创建了一个 main.js 文件，它需要 main.less加载.ttf
嗯，我看不出有什么实质性的区别。我想知道问题是否出在其他地方。谢谢你的努力，我真的很感激