Question

我正在尝试将一些字体包含在一个组件库中，我将它作为使用Webpack生成的UMD软件包分发并安装为NPM模块;组件使用这些字体。问题是指向生成的包中的字体的URL不正确，并且在运行使用该库的应用程序时会导致404.

例如，resolve-url-loader将输出"/myfont.woff"的网址。但是，当然，该文件实际上并不在应用程序中的该URL处可用，除非使用它的应用程序执行某些配置来复制该文件并在预期路径上提供它。

当应用程序从我的库中导入组件时，有没有办法自动使这些字体可用（即font-face: 'My Font'可用），最小化使用它的应用程序所需的配置量

对于大文件，我不想使用url-loader和Base 64编码，我不能使用CDN。

Answer 1

我认为最简单的方法是提供一个.css文件，通过相对url(...)语句来使用您的资产。然后，有像

这样的东西

...
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
},
{
  test: /\.(eot|svg|ttf|woff|woff2|png|jpg)$/,
  use: ['file-loader'],
},
...

在他们的webpack.config.js和你的代码中导入的.css文件中，他们可以通过自动将资源转移到输出公共目录来使用资产（URL也应该在结果CSS包中自动调整）

例如，您可以查看Onsen UI库，它可以通过这些文件嵌入其资源和样式：

import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

以下是他们如何通过相关网址使用字体的示例：

@font-face {
  font-family: 'Material-Design-Iconic-Font';
  src: url('../fonts/Material-Design-Iconic-Font.woff2') format('woff2'), url('../fonts/Material-Design-Iconic-Font.woff') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Answer 2

你需要一些装载机才能完成这项任务。修复大文件大小问题我使用文件加载器。

      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?name=assests/fonts/[name].[ext]' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?mimetype=application/font-woff&name=assests/fonts/[name].[ext]' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=application/octet-stream&name=assests/fonts/[name].[ext]' },
      { test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml&name=assests/fonts/[name].[ext]' },
      { test: /\.(jpe?g|png|gif|ico)$/i, loader: 'file-loader?name=assests/images/[name].[ext]' },

最后使用import语句导入字体的css文件

import from ./assets/fonts/abc.css

但请确保您已安装webpack css加载器

如何使用Webpack构建的React组件库分发字体或其他静态资源？

2 个答案: