React webpack應用程序未載入Roboto字體

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

看起來像應用程序無法加載字體。

請嘗試：

1. 在的src/JS/index.js：刪除行

   進口」 ../fonts/index.css';

2. 重命名文件index.css到roboto.scss

3. 在的src /字體/ roboto.scss使用絕對路徑，而不是相對路徑：

@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; 
 
}

中 的src/CSS/styles.scss

添加：

@import 「../fonts/roboto」;

你也可以看看this提交。

更新1 您可以使用WhatFont鉻擴展來檢查。它是Roboto Light。

更新2

我發現，你必須使用絕對HTTP URL，因爲應用程序無法找到正常路徑的字體。

的src /字體/ roboto.scss

@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; 
 
}

而結果：