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 + "個")
})
結論#
需要が少ない場合は、クライアントを使用することもできます
クライアントのダウンロード:
クラウドストレージ: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