CSS 使用本地 Web 字体与 webpack

在本文中，我们将介绍如何在 webpack 中使用本地字体文件来加载自定义字体样式。

阅读更多：CSS 教程

什么是本地字体文件？

本地字体文件是一种包含字形数据的文件，通常用于在网页中加载自定义字体。与传统的 Web 字体加载方式不同，使用本地字体文件可以确保字体样式在不同浏览器和操作系统上的一致性。

使用 webpack 加载本地字体

为了使用本地字体文件，我们需要在 webpack 配置文件中加入相应的配置，以确保字体文件能够被正确地加载。

首先，我们需要安装 file-loader，这是一个 webpack loader，用于处理各种文件，包括字体文件。在命令行中执行以下命令进行安装：

npm install file-loader --save-dev

安装完成后，在 webpack 配置文件中添加以下规则：

module: {
  rules: [
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }
      ]
    }
  ]
}

上述配置中，我们使用了 file-loader 处理字体文件，并将它们输出到名为 fonts 的文件夹中。

现在，我们可以使用本地字体文件来定义自定义字体样式了。假设我们有一个名为 myfont.woff 的字体文件，我们可以在 CSS 文件中使用以下代码来引入并应用该字体：

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyFont', sans-serif;
}

上述代码中，我们使用 @font-face 定义了一个字体样式，将字体文件的路径指定为引用本地字体文件的相对路径。

重新打包应用之后，字体文件将会被复制到指定的输出目录，CSS 中的字体样式也将被正确加载和应用。

CSS Modules 中的本地字体加载

如果您正在使用 CSS Modules 来管理样式，那么在使用本地字体文件时需要稍加修改。

首先，确保在 webpack 配置文件中启用 CSS Modules，可以通过以下配置实现：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }
      ]
    }
  ]
}

启用 CSS Modules 后，我们可以在 CSS 文件中使用本地字体文件。在 CSS 文件中，可以使用 composes 关键字来继承字体样式，并通过 url 来引入字体文件。

.myFont {
  composes: 'MyFont' from './fonts/myfont.woff';
}

.myCustomText {
  font-family: 'MyFont', sans-serif;
}

上述代码中，我们使用 composes 继承了 MyFont 字体样式，并通过相对路径引入了字体文件。

使用 CSS Modules 时，webpack 会自动将字体文件复制到输出目录，并在 CSS 中正确引用字体文件。

总结

通过使用 webpack 和 file-loader ，我们可以轻松地加载和应用本地字体文件，以实现自定义字体样式。

首先，我们在 webpack 配置文件中配置 file-loader ，以确保字体文件可以被正确加载。然后，我们可以使用 @font-face 在 CSS 中定义字体样式，并通过相对路径引用本地字体文件。

如果您正在使用 CSS Modules，只需稍加修改即可。启用 CSS Modules 后，我们可以使用 composes 关键字来继承字体样式，并通过相对路径引入字体文件。

希望本文对您了解使用本地字体文件与 webpack 有所帮助，并能够在您的项目中灵活运用。祝您编程愉快！