Загруженный шрифт не отображается в проекте Node.js - PullRequest
Новая
       25

Загруженный шрифт не отображается в проекте Node.js

0 голосов
/ 05 мая 2020

Я пытаюсь отобразить шрифт Google в моем node.js проекте. Мне пришлось добавить file-loader , чтобы загрузить файл .ttf, но он не отображается. Кажется, загружается нормально - это мой вывод терминала:

terminal output

Это мой 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): html in browser

, но он не отображается:

Должно быть (Android Cordova): Oswald

Is: Not Oswald

why does it says it's 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. Я поиграю с этим ...

1 Ответ

0 голосов
/ 05 мая 2020

Кажется, что ваш style.css файл скомпилирован в каталоге public. Таким образом, в этом случае путь к шрифту будет ./fonts/Oswald-VariableFont_wght.ttf.

...