背景
このプロジェクトは Alibaba Pratt & Whitney 2.0 フォントを使用しており、モデルはそれぞれ 35-thin と 45-light です。これら 2 つのフォント パッケージは約 8mb です。ローカルでロードする場合、速度は影響を受けない可能性があります。本番環境およびテストに送信されるときは
、環境、速度特にテスト環境では非常に遅くなり、フォントパッケージは1分間ロードされ、Webページのフォントは1分後に変更されます。これは法外です
最適化
プラグイン: font-spider、スキームは vue React jquery などを含むすべてのプロジェクトで使用されます。
まず font-spider の原則について話します, 独自のフォント パッケージ .ttf ファイルにはすべてのテキストが含まれているためです.
font-spider の機能は、必要なテキストを必要なフォントに変換するのに役立ちます。たとえば、プロジェクト全体で
3 文字「鸡汤辉」に Alibaba Pratt & Whitney フォントを使用したい場合、font-spider はこれら 3 文字を Alibaba Pratt & Whitney フォントに変換し、新しい .ttf ファイルを生成します。変換したい文字が少ないほど、結果として得られる .ttf フォント ファイルは小さくなります
ステップ
1. font-spider の依存関係をインストールする
npm install font-spider -g
2. 任意の名前で新しいフォルダーを作成します。このフォルダーには、インポートするフォント ファイル (Ttf ファイル) が含まれている必要があり、そのフォルダー内に font.css などの新しい CSS ファイルを作成します。
@font-face {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
src: url('./AlibabaPuHuiTi-2-35-Thin.ttf');
font-weight: normal;
font-style: normal;
}
.thin {
font-family: 'AlibabaPuHuiTi-2-35-Thin';
}
@font-face {
font-family: 'AlibabaPuHuiTi-2-45-Light';
src: url('./AlibabaPuHuiTi-2-45-Light.ttf');
font-weight: normal;
font-style: normal;
}
.light {
font-family: 'AlibabaPuHuiTi-2-45-Light';
}
ここの URL では、圧縮されていないInitialization.ttf ファイルが使用されます。
3. 新しい HTML ファイルを追加します (強調)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font.css">
</head>
<body>
<div>
<!-- 这里对应的是thin的压缩包 -->
<div class="thin">
鸡汤辉
</div>
<!-- 这里对应的是light的压缩包 -->
<div class="light">
鸡汤辉
</div>
</div>
</body>
</html>
新しく追加した CSS ファイルを HTML ファイルに導入し、CSS ファイル内の 2 つの新しいクラスをそれぞれ使用する 2 つの div を書き込みます。
これら 2 つの div に入力したテキスト、文字、数字、文字は、font-spider が必要であることを示しています。それらを希望のフォントに変換します。プロジェクト内でこれら 2 つの div の外側のテキストを使用する場合、範囲内にないテキストでは希望のフォントが使用されません。
例: これら 2 つの div に「鸡汤辉」という 3 文字を書きました。その後、最終的に生成された .ttf ファイルは Jitanghui のみを認識し、
Jitanghui を Alibaba Pratt & Whitney フォントの他の漢字に設定します。数字、記号、文字は次のとおりです。システムに付属するすべてのフォント
4. 最後のステップでは、使用するファイル パッケージに cd します。
font-spider index.html
ここのindex.htmlは新しく追加したHTMLファイルで、任意の名前を使用できます。
最後に、このフォルダーは新しい .ttf ファイルと .font-spider フォルダーを生成します。この .font-spider フォルダーには、圧縮されていない .ttf ファイルが保存されます。この時点で、ファイルの場所は自動的に処理されます。圧縮します。古い
ttfファイルは元のファイルを直接置き換えます。CSS ファイルは参照ファイルの場所を変更する必要はなく、それを直接使用するだけです。
終わり
教えてください。ここの HTML ファイル div に、一般的に使用される 3500 個の漢字、英字、大文字、小文字、中国語、英語の記号を書きました。これで基本的に一般的な項目をカバーできます。特殊な記号や珍しい単語がある場合は、個別に追加できます。 、最終的には8mbから900kbに圧縮されました