Question

我正在使用React应用程序，我想使用Roboto Font.I已经按照该过程加载了roboto字体。以下是我的项目结构：

我的Index.css文件

 @font-face {
        font-family: 'Roboto-Light';
        src: url('./Roboto-Light.eot');
        src: url('./Roboto-Light.eot?#iefix') format('embedded-opentype'),
             url('./Roboto-Light.woff') format('woff'),
             url('./Roboto-Light.ttf') format('truetype'),
             url('./Roboto-Light.svg#RobotoLight') format('svg');
        font-weight: 100;
        font-style: normal;
    }

我的webpack.config.js：

const webpack = require('webpack');
const { resolve } = require('path');
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    resolve(__dirname, 'src', 'js/index'),
  ],
  output: {
    filename: '[name].[hash].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.s?css$/,
        use: [
          'style-loader',
          'css-loader?sourceMap&camelCase&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'sass-loader?sourceMap'
        ]
      },
      {
        test: /\.(jpg|jpeg|gif|png)$/,
        exclude: /node_modules/,
        use: [
          'url-loader?limit=1024&name=images/[name].[ext]'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        use: ['file-loader?name=src/fonts/[name].[ext]']
      },
      {
        test: /\.(json)$/,
        use: ['file-loader?name=[name].[ext]']
      }
    ]
  }
}

并使用css将字体加载为：

body {
    font-family: 'Roboto-Light' !important;
}

我已经按照this教程进行了操作，但它没有按预期工作，并且未在网页上加载字体。提前致谢。

到目前为止，我还没有得到任何解决方案。

根据请求

添加了屏幕截图

Answer 1

看起来该应用无法加载字体。

请尝试：

src / js / index.js

：删除行

导入＆＃39; ../ fonts / index.css＆＃39;;
将文件 index.css 重命名为 roboto.scss

src / fonts / roboto.scss

使用绝对路径而不是相对路径：

＆＃13;

@font-face {
    font-family: 'Roboto-Light';
    src: url('/src/fonts/Roboto-Light.eot');
    src: url('/src/fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
         url('/src/fonts/Roboto-Light.woff') format('woff'),
         url('/src/fonts/Roboto-Light.ttf') format('truetype'),
         url('/src/fonts/Roboto-Light.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}

＆＃13;

src / css / styles.scss

添加：

@import＆＃34; ../ fonts / roboto＆＃34;;

您还可以查看this提交。

更新1 您可以使用WhatFont chrome扩展程序进行检查。这是Roboto Light。

更新2

我发现您必须使用绝对的http网址，因为应用无法找到具有正常路径的字体。

<强>的src /字体/ roboto.scss

＆＃13;

@font-face {
    font-family: 'Roboto-Light';
    src: url('http://localhost:8089/fonts/Roboto-Light.eot');
    src: url('http://localhost:8089/fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
         url('http://localhost:8089/fonts/Roboto-Light.woff') format('woff'),
         url('http://localhost:8089/fonts/Roboto-Light.ttf') format('truetype'),
         url('http://localhost:8089/fonts/Roboto-Light.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}

＆＃13;

结果：

React webpack应用程序未加载Roboto字体

1 个答案: