11

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

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

font-face: 'My Font'当应用程序从我的库中导入一个组件时，有没有办法自动使这些字体可用（即可以工作），从而最大限度地减少使用它的应用程序所需的配置量？

对于大文件，我不想使用url-loaderBase 64 编码，也不能使用 CDN。

4

2 回答 2

10

我认为最简单的方法是提供一个文件，通过相关语句.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';

以下是他们如何通过相对 URL 使用字体的示例：

@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;
}
于 2017-11-10T01:11:56.327 回答
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 加载器

于 2017-11-10T07:47:24.817 回答