面试题：Webpack字体资源加载优化与兼容性处理

字体资源优化加载

减少文件体积：
- 字体子集化：使用工具（如 fonttools）提取项目实际使用到的字符子集，生成精简的字体文件。例如，若项目只使用到英文字母和部分数字，可以剔除其他不使用的字符。
- 字体格式选择：
  - WOFF2：现代浏览器支持的高效字体格式，文件体积小。优先使用 woff2 格式，它比 woff 有更好的压缩率。
  - WOFF：作为 woff2 的兼容备用格式，用于不支持 woff2 的浏览器。
  - EOT：用于IE浏览器，虽然较旧，但仍需包含以确保IE兼容性。
  - TTF/OTF：作为基础格式，部分浏览器可能需要。
提高加载速度：
- CDN加载：将字体文件上传到CDN（内容分发网络），利用CDN的全球节点缓存和分发优势，根据用户地理位置就近获取资源，加快加载速度。
- 异步加载：使用 @font-face 的 font-display 属性来控制字体加载和显示行为。例如，设置 font-display: swap，这样在字体加载时，文本会先使用系统默认字体显示，字体加载完成后再切换，减少文本无样式闪烁（FOUT）问题。

针对IE等旧浏览器的字体兼容性处理

关键Webpack配置：

安装 file-loader 和 url-loader，url-loader 基于 file-loader 构建，可将小文件转换为Data URL嵌入到CSS中。

npm install file-loader url-loader --save-dev

在Webpack配置文件（webpack.config.js）中添加如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8].[ext]'
        }
      }
    ]
  }
};

若想使用 url-loader 处理小字体文件（如小于10kb的文件转换为Data URL），配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10 * 1024, // 10kb
              fallback: {
                loader: 'file-loader',
                options: {
                  filename: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      }
    ]
  }
};

代码示例：

在CSS文件中使用 @font-face 引入字体：

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff'),
       url('/fonts/myfont.eot');
  src: url('/fonts/myfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff'),
       url('/fonts/myfont.ttf') format('truetype'),
       url('/fonts/myfont.otf') format('opentype'),
       url('/fonts/myfont.svg#MyFont') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

在HTML文件中引入包含字体的CSS文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <title>Font Optimization</title>
</head>
<body>
  <h1>Font Optimization Example</h1>
</body>
</html>

这样通过Webpack配置和 @font-face 的合理使用，可以实现字体资源的优化加载以及对旧浏览器的兼容性处理。

星途面试题库

面试题：Webpack字体资源加载优化与兼容性处理

知识考点

面试题答案

字体资源优化加载

针对IE等旧浏览器的字体兼容性处理