css - Node.js 项目中不显示加载的字体

问题描述

我正在尝试在我的 node.js 项目中显示谷歌字体。我必须添加文件加载器来加载 .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("https://fonts.googleapis.com/css?family=Oswald:400");更新：如果我添加到末尾，我可以让字体正确显示，@font-face所以我怀疑问题是如何使用 webpack 配置加载字体。我会和它一起玩...

标签： cssnode.jswebpackfonts

css - Node.js 项目中不显示加载的字体

问题描述

解决方案

推荐阅读