时间戳

首页 > 解决方案 > 使用 webpack 4 加载自定义字体字体

webpack - 使用 webpack 4 加载自定义字体字体

问题描述

尝试了不同的方法在 webpack 4 中加载自定义的 Gugi/Roboto 字体。似乎没有一个可以正确加载字体。

但是，当我在系统中安装字体时，它按预期工作 - 表明 Css 和应用程序工作正常。因此，这似乎是一个我无法理解的 webpack 问题。

index.js

import 'typeface-roboto';

Webpack 配置

{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, loader: 'css-loader' },
{ test: /\.woff2?$/, loader: 'url-loader?limit=100000&mimetype=application/font-woff' },

我在 React 中使用 mui-next，它应该可以与 Roboto 字体一起使用。（如果它在系统中可用，该字体就完美了 - 安装在 Windows 左右。）

此外，尝试了不同的方法 - 通过 font.css 加载字体，并通过 gulp 复制 woff2 文件。奇怪 - 似乎没有一个选项有效。

谢谢你的帮助！

标签： webpacktypefacecss-loaderurlloaderwebpack-4

解决方案

推荐阅读