demo16 webpack 處理字體

1.關於字體

字體的格式有不少種，各個瀏覽器對各個字體格式的支持程度也不一樣，字體格式有如下幾種：

• TureTpe(.ttf) 格式

  支持 IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

• OpenType(.otf) 格式

  支持 Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

• Embedded Open Type(.eot) 格式：

  支持 IE4+

• Web Open Font Format(.woff) 格式：

  支持 IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

• SVG(.svg) 格式：

  支持 IE9+,Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

定義@font-face

@font-face {
  font-family: "icomoon";
  src: url("./icomoon.eot?nn7hff");
  src: url("./icomoon.eot?nn7hff#iefix") format("embedded-opentype"),
    url("./icomoon.ttf?nn7hff") format("truetype"),
    url("./icomoon.woff?nn7hff") format("woff"),
    url("./icomoon.svg?nn7hff#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
複製代碼

使用字體

.div1 {
  font-family: "icomoon" !important;
}
複製代碼

2.製做自定義字體

經過 IcoMoon 平臺，咱們能夠挑選和定製項目所用到的字體 icon ，最後導出字體的 eot , svg , woff , ttf 格式，幷包含一個定義了 @font-face 的 css 文件，也就是說咱們不須要本身去定義 @font-face ，只要引用這份 css 文件，便可使用到字體圖標。

IconMon 平臺導出的文件包大概以下：

icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff
style.css // 定義了 @font-face，以及使用字體的相關樣式
複製代碼

3.經過 url-loader 和 file-loader 處理字體

經過 url-loader 和 file-loader 配合能夠實現：

當字體大小 < 某個限定值（limit）時，轉換爲 base64 字符傳，並打包進 bundle 中。

當字體大小 > 某個限定值時，將圖片放到指定目錄下，並經過 url 引用。

當字體大小比較小時，能夠把字體轉化爲 base64 字符串，從而減小一次瀏覽器發起 http 請求。

當字體比較大時，就不必了，由於 base64 轉換後，整體積會變大，此時比不上多一次 http 請求的性能。

4.安裝相關依賴

npm install -D css-loader style-loader
npm install -D file-loader url-loader
npm install -D html-webpack-plugin mini-css-extract-plugin
npm install -D webpack // html-webpack-plugin、mini-css-extract-plugin 依賴於 webpack
複製代碼

5.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo16
    --src
      --assets
        --fonts
          -icomoon.css
          -icomoon.eot //3KB
          -icomoon.svg //5KB
          -icomoon.ttf //3KB
          -icomoon.woff //3KB
        --styles
          -app.css
      -app.js
    -index.html
    -webpack.config.js
複製代碼

src/assets/fonts/icomoon.css

@font-face {
  font-family: "icomoon";
  src: url("./icomoon.eot?nn7hff");
  src: url("./icomoon.eot?nn7hff#iefix") format("embedded-opentype"),
    url("./icomoon.ttf?nn7hff") format("truetype"),
    url("./icomoon.woff?nn7hff") format("woff"),
    url("./icomoon.svg?nn7hff#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-wechat:before {
  content: "\e900";
  color: #7bb32e;
}
.icon-github:before {
  content: "\e902";
}
.icon-envelop:before {
  content: "\e945";
}
複製代碼

src/assets/styles/app.css

.icons-box {
  width: 500px;
  height: 100px;
  margin: auto;
  margin-top: 180px;
}

.icons-box i {
  font-size: 100px;
  margin-left: 20px;
}
複製代碼

src/app.js

import "./assets/fonts/icomoon.css";
import "./assets/styles/app.css";
複製代碼

6.編寫 webpack 配置文件

webpack.config.js

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      },
      {
        test: /\.(eot|woff2?|ttf|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].min.[ext]",
              limit: 3000, // size <= 3000B, 改爲5000B試試? 
              publicPath: "fonts/",
              outputPath: "fonts/"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ // 自動生成html,而且自動導入全部依賴同步包
      filename: "index.html",
      template: "./index.html",
      minify: {
        // collapseWhitespace: true // 壓縮
      }
    }),

    new MiniCssExtractPlugin({
      filename: "[id].[name].[chunkhash:8].css",
      chunkFilename: "[id].[name].[chunkhash:8].css"
    })
  ]
};
複製代碼

7.執行打包命令

(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

8.驗證打包結果

輸出結果:

--dist
  --fonts
    -icomoon-69ba6.min.svg //5KB
  -0.app.a3d3cc59.css
  -app.bundle.js
  -index.html
複製代碼

<= 3KB 的字體文件被轉換成 base64 字符串並打包進 app.bundle.js 中。

icomoon.svg(18.6KB) => icomoon-69ba6.min.svg

把 limit 改爲 5000 試試?

9.源碼地址

demo 代碼地址: github.com/SimpleCodeC…

倉庫代碼地址(及目錄): github.com/SimpleCodeC…