未在Node.js项目中显示加载的字体

加载的字体"/>

未在Node.js项目中显示加载的字体

我正在尝试在我的node.js项目中显示google font。我必须添加file-loader才能加载.ttf文件，但未显示。似乎加载良好-这是我的终端输出：

这是我的webpack.config：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');

const javascript = {
  test: /\.(js)$/,
  use: [{
    loader: 'babel-loader',
    options: { presets: ['env'] }
  }],
};

const postcss = {
  loader: 'postcss-loader',
  options: {
    plugins() { return [autoprefixer({ browsers: 'last 3 versions' })]; }
  }
};

const styles = {
  test: /\.(scss)$/,
  use: ExtractTextPlugin.extract(['css-loader?sourceMap', postcss, 'sass-loader?sourceMap'])
}; 

const fonts = {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: './public/fonts/'
      }
    }
  ]
}

const uglify = new webpack.optimize.UglifyJsPlugin({
  compress: { warnings: false }
});

const config = {
  entry: {
    App: './public/javascripts/app.js'
  },
  devtool: 'source-map',
  output: {
    path: path.resolve(__dirname, 'public', 'dist'),
    filename: '[name].bundle.js'
  },

  module: {
    rules: [javascript, styles, fonts]
  },
  plugins: [
    new ExtractTextPlugin('style.css'),
  ]
};

process.noDeprecation = true;

module.exports = config;

浏览器显示已应用字体（已在Chrome和Firefox中验证）：

但未显示：

应该是（Android Cordova）：

是：

浏览器是否告诉我将其设置为Oswald，但出于某种原因又恢复为默认设置？

我的CSS：

.device {
  @font-face {
    font-family: 'Oswald';
    font-display: auto;
    src: url("../fonts/Oswald-VariableFont_wght.ttf");
    font-weight: normal;
    font-style: normal; 
  }
  h2 {
    font-family: 'Oswald';
    text-transform: uppercase;
  }
...
}

我已验证路径“ ../fonts/Oswald-VariableFont_wght.ttf”是正确的。例如。如果将其更改为“ ... / fonts / Oswald-VariableFont_wght.ttf”，则会收到新错误。

我想念什么？

更新：如果在@import url(":400");的末尾添加@font-face，我可以使字体正确显示，因此我怀疑问题是如何使用webpack配置加载字体。我会玩...

似乎您的style.css文件已编译在public目录中。因此，在这种情况下，字体的路径为./fonts/Oswald-VariableFont_wght.ttf。