Xlenco

Xlenco

github
zhihu
email

フロントエンドのフォント圧縮ソリューション

Fontmin#

Fontmin は、純粋な JS フォントサブセット化ソリューションです。Fontmin を使用すると、TTF フォントファイルから必要な文字を抽出し、TTF ファイルに変換して出力することで、「圧縮」効果を実現できます。
公式ウェブサイト:ecomfe.github.io/fontmin/

Fontmin のインストール#

npm install --save fontmin

font.js ファイルを作成します

名前は任意で、後で実行するためです

var Fontmin = require("fontmin")

var fontmin = new Fontmin()
  .src("./src/assets/font/example.ttf")
  .dest("./src/assets/fontmin/")
  .use(
    Fontmin.glyph({
      text: "ここに圧縮するテキストを入力"
    })
  )

fontmin.run(function(err, files) {
  if (err) {
    throw err
  }
})

これは fontmin のドキュメントにある使用法です。他の使用法については、GitHub のドキュメントを参照してください:fontmin
そして、次のコマンドを実行します:

shell
コードをコピーnode .\font.js

上級者向け#

上記の方法では、大量のテキスト圧縮の要件に対処するのは面倒です。実際のプロジェクトでは、すべてのテキストを手動で ${text} に書き出して配置することはできません。次に、ファイルの読み取り機能を実装し、含まれるすべての文字を読み取ります。

const fs = require("fs")

fs.readFile("./idenx.html", (err, data) => {
  if (err) {
    console.log(err)
  }
  const mySet = new Set(data.toString()) // 重複を削除するため
  console.log(Array.from(mySet).join(""))
})

完全なコード#

以下のソースコードは、zhuanlan.zhihu.com/p/48318293から取得しました。

const fs = require("fs")
const Fontmin = require("fontmin") // fontminプラグインを使用する必要があります
let set = new Set()

//すべての可能な文字を取得
const scanFolder = (dir, done) => {
  let results = []
  fs.readdir(dir, (err, list) => {
    if (err) {
      return done(err)
    }
    let i = 0
    ;(function iter() {
      // ここで即時関数がクロージャをトリガーし、resultsの値を常に保存します
      let file = list[i++]
      if (!file) {
        // iteratorの反復処理、ファイルが存在しない場合は完了状態を意味します
        return done(null, results)
      }
      file = dir + "/" + file
      fs.stat(file, (err, stat) => {
        if (stat && stat.isDirectory()) {
          scanFolder(file, (err, res) => {
            // メソッドを再度呼び出して、サブディレクトリのディレクトリ構造を取得します
            results = results.concat(res)
            iter()
          })
        } else {
          results.push(file)
          iter() // 次のステップを実行します
        }
      })
    })()
  })
}

//すべての可能な文字を取得
const generateFinalHTML = finalString => {
  const fontmin = new Fontmin()
    .src("./src/assets/font/SourceHanSansCN-Regular.ttf") // ソースフォントファイルのパス
    .dest("./src/assets/font/fontmin/") // 圧縮後のファイルの保存先パス、最終的にはこの圧縮後のファイルを使用します
    .use(
      Fontmin.glyph({
        text: finalString, // 生成する文字セットを直接指定することもできます
        hinting: false
      })
    )

  fontmin.run(err => {
    if (err) {
      throw err
    }
  })
}

//すべての可能な文字を取得
//スキャンパスを指定します。パスが異なると、最終的にスキャンされる文字数が異なります
scanFolder("src/views", (n, results) => {
  results.forEach(file => {
    const result = fs.readFileSync(file, "utf8")
    const currentSet = new Set(result)
    //各ファイルの文字を取得し、セットに保存します
    set = new Set([...set, ...currentSet])
  })
  generateFinalHTML(Array.from(set).join(""))
  console.log("生成された文字数:" + Array.from(set).length + "個")
})

結論#

需要が少ない場合は、クライアントを使用することもできます
app.png
クライアントのダウンロード:
クラウドストレージ:https://www.123pan.com/s/IlX7jv-GSJk3.html
公式ウェブサイト(GitHub):https://github.com/ecomfe/fontmin-app/releases/download/v0.2.0/Fontmin-v0.2.0-win64.zip

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。