webpack項目如何正確打包引入的自定義字體

一. 如何在Vue或React項目中使用自定義字體

在開發前端項目時，常常會遇到UI同事但願在項目中使用一個炫酷字體的需求。那麼怎麼在項目中使用自定義字體呢？

其實實現起來並不複雜，能夠借用CSS3 @font-face 來實現。

本文着重介紹一下 webpack 項目如何正確打包引入的自定義字體。

能夠訪問 這裏 查看更多關於大數據平臺建設的原創文章 或 webpack系列之loader及簡單的使用。

 

@font-face有什麼用

總結一下就是：用戶藉助該規則，能夠爲引入的字體包命一個名字，並指定在哪裏能夠找到它（指定字體包的存儲路徑）後，就能夠像使用通用字體那樣去使用它了。

具體實現步驟

例如如今的需求是：須要在項目中使用 KlavikaMedium-Italic 字體。

則只需如下三個步驟便可。

1. 將字體包放入項目目錄下

這裏放到根目錄下的 tool/fonts 文件夾裏。

2. 在index.css文件中定義

@font-face {
  font-family: 'myFont';
  src: url(tool/fonts/KlavikaMedium-Italic.otf);
}

　　

3. 使用自定義字體

新建一個index.vue文件，引入樣式：

import './index.css'
<template>
<h1>使用自定義字體</h1>
<style>
  h1 {
    font-family: 'myFont'
  }
</style>
</template>

效果以下：

 

 

 

 

二. webpack項目如何正確打包自定義的字體

1. 打包時報錯

既然在本地開發環境實現了效果，因而就使用 webpack 打包準備上線，卻發現 webpack 在打包過程當中報錯：

2. 打包時爲何會報錯

咱們在定義自定義字體時使用URL指定了字體包的路徑，因爲 webpack 默認是沒法處理 css 中的 url 地址的，所以這裏會報錯。

3. 解決報錯

3.1 認識file-loader

這時就須要藉助 loader 來大顯身手了，解決這個問題須要使用 file-loader，它主要乾了兩件事兒：

• 根據配置修改打包後圖片、字體包的存放路徑；

• 再根據配置修改咱們引用的路徑，使之對應引入。

3.2 安裝file-loader

yarn add file-loader

　　

3.3 配置file-loader

在 webpack.config.js 中，配置file-loader：

module.exports = {
  module: {
    rules: [
      {
        // 命中字體包
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        // 只命中指定 目錄下的文件，加快Webpack 搜索速度
        include: [paths.toolSrc],
        // 排除 node_modules 目錄下的文件
        exclude: /(node_modules)/,
        loader: 'file-loader',
      },
    ]
  }
}

　　

再次執行打包命令，再也不報錯。

4. 自定義字體爲何不生效

因而將打包出來的 dist 目錄從新部署到服務器上後訪問頁面，卻發現因爲找不到字體致使沒有生效：

從圖中能夠看出，http請求字體包的路徑爲：根目錄下(打包出來的靜態文件index.html所在目錄)的 css/620db1b997cd78cd373003282ee4453f.otf。

4.1 字體不生效的緣由

看了一下打包命令生成的 dist 目錄結構：

├── 620db1b997cd78cd373003282ee4453f.otf
├── css
│   ├── backend.66a35.css
│   └── backend.66a35.css.map
├── favicon.ico
├── images
│   ├── bg.5825f.svg
│   ├── data-baseTexture.c2963.jpg
│   ├── data-heightTexture.6f50d.jpg
│   └── logo.7227a.png
├── index.html
└── js
    ├── backend.66a35.js

　　

卻發現，字體包和 index.html 是在同一級。所以字體沒法生效的緣由就很明朗了：

• 因爲http請求的字體包路徑與實際的存放路徑一致，就致使了404；

• 找不到字體包的實際路徑，所以使用的字體沒法生效。

4.2 字體不生效的解決辦法

能夠經過修改字體包打包後的實際存儲路徑去解決這個問題，在 webpack.config.js 中，藉助 options 參數能夠繼續給 file-loader 設置更多的配置項：

module.exports = {
  module: {
    rules: [
      {
        // 命中字體包
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        // 只命中指定 目錄下的文件，加快Webpack 搜索速度
        include: [paths.toolSrc],
        // 排除 node_modules 目錄下的文件
        exclude: /(node_modules)/,
        loader: 'file-loader',
        // 新增options配置參數：關於file-loader的配置項
        options: {
          limit: 10000,
          // 定義打包完成後最終導出的文件路徑
          outputPath: 'css/fonts/',
          // 文件的最終名稱
          name: '[name].[hash:7].[ext]'
        }
      },
    ]
  }
}

　　

再次打包，生成的 dist 目錄結構以下：

​

├── css
│   ├── backend.66a35.css
│   ├── backend.66a35.css.map
│   └── fonts
│       └── KlavikaMedium-Italic.620db1b.otf
├── favicon.ico
├── images
│   ├── bg.5825f.svg
│   ├── data-baseTexture.c2963.jpg
│   ├── data-heightTexture.6f50d.jpg
│   └── logo.7227a.png
├── index.html
└── js
    ├── backend.66a35.js

　　

能夠看到字體包正如配置時預期的那樣存儲在 css/fonts 目錄下面。

從新部署項目，再次查看：

這一次 http 請求的字體包路徑與實際的存放路徑一致，所以自定義字體生效。

能夠經過下面這個梳理流程圖看的更清楚一些：

 

三. 總結

爲何本地開發的時候能夠看到字體，部署到服務器後卻看不到了呢？

• 因爲 webpack 項目在本地開發中使用的是 webpack-dev-server，實時編譯後的文件都保存到了內存當中，引用字體包的時候使用的是絕對路徑，所以在本地開發中使用的自定義字體可以生效；

• 使用webpack打包後的 dist 目錄，字體包的實際存儲路徑與 http 請求字體包的路徑不一致，所以致使找不到字體包；

• 藉助 file-loader 解決 webpack 打包報錯，經過使用 options 參數去設置字體包在打包後的實際存儲路徑，從而解決問題。

關注微信公衆號

歡迎你們關注個人微信公衆號閱讀更多原創文章：