CSS 使用Webpack和font-face加载字体

在本文中，我们将介绍如何使用Webpack和font-face来加载字体。

阅读更多：CSS 教程

什么是Webpack？

Webpack是一个用于构建前端项目的JavaScript模块打包工具。它可以将各种类型的文件（包括CSS、JavaScript、图像等）打包为静态资源，方便加载和使用。

What is font-face？

font-face是CSS的一种规则，它允许我们在网页上使用自定义字体。通过定义字体文件的路径和名称，我们可以在网页中引用这些字体，并将其用于各种元素。

在Webpack中配置字体加载

在使用Webpack加载字体之前，我们需要安装一些必要的包。首先，我们需要安装Webpack和相关的loader，可以通过以下命令来安装：

npm install webpack webpack-cli css-loader style-loader file-loader --save-dev

安装完成后，我们可以在webpack.config.js文件中进行配置。首先，我们需要添加一个loader来处理字体文件，这里我们使用file-loader。在module.rules数组中添加以下代码：

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

上面的代码将匹配所有后缀名为woff、woff2、eot、ttf和otf的字体文件，并使用file-loader将其拷贝到输出目录中的fonts文件夹下。

接下来，我们还需要安装并配置css-loader和style-loader。这两个loader将帮助我们处理CSS文件中的字体引用和样式注入。

首先，安装css-loader和style-loader：

npm install css-loader style-loader --save-dev

然后，在webpack.config.js文件中添加以下代码：

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

上面的代码将匹配所有后缀名为.css的文件，并使用style-loader和css-loader处理它们。这将使我们能够在CSS文件中引用字体文件。

现在，我们已经完成了Webpack的配置，可以开始在CSS文件中加载字体了。

在CSS中加载字体

在CSS文件中，我们可以使用@font-face规则来引用字体文件并定义其名称。例如，我们有一个名为”Roboto”的字体文件，可以在CSS文件中添加以下代码：

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

上面的代码定义了一个名为”Roboto”的字体，它使用了相对路径来引用字体文件（假设字体文件在输出目录的fonts文件夹下）。src属性指定了字体文件的路径和格式。

现在，我们可以在其他CSS样式中使用这个自定义字体了。例如：

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

上面的代码将将”Roboto”字体应用于整个文档的body元素。

示例

为了帮助理解，我们提供以下示例。

假设我们有一个简单的项目结构如下：

├── src
│   ├── index.js
│   ├── index.css
│   └── fonts
│       └── Roboto-Regular.ttf
├── dist
│   ├── bundle.js
│   ├── index.html
│   └── fonts
│       └── Roboto-Regular.ttf
├── webpack.config.js
└── package.json

在index.css中，我们可以使用@font-face来加载字体：

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

在index.js中，我们可以引入index.css并将其应用于整个文档：

import './index.css';

最后，在webpack.config.js中，我们需要添加字体文件的处理规则：

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