ホームページ > ウェブフロントエンド > jsチュートリアル > ノードフォント圧縮プラグイン font-spider の使い方の紹介

ノードフォント圧縮プラグイン font-spider の使い方の紹介

不言
リリース: 2018-09-27 16:17:22
オリジナル
2892 人が閲覧しました

この記事では、ノード フォント圧縮プラグイン font-spider の使用方法を紹介します。必要な方は参考にしていただければ幸いです。

要件:

  1. 当事者 A の要件に従って、UI で指定されたフォントを使用します

  2. デフォルト表示モバイル端末用システム デフォルトのフォント、システムのデフォルト以外のフォントは自分でフォント パッケージにインポートする必要があります

  3. フォント パッケージが大きすぎます。通常、フォント パッケージは数 MB です。ページの読み込み速度が大幅に遅くなります

分析:

  1. テキスト コンテンツは固定コンテンツであり、更新する必要はありません

  2. テキストの内容は主に一般的に使用されるテキストであり、テキストのほとんどは使用されません。

##プラグイン:

font-spider
node 安装插件方法:npm install font-spider -g
ログイン後にコピー
操作:

  1. プラグインのインストール

  2. プロジェクト テキストの抽出:

    一時的な HTML を作成し、プロジェクトに必要なすべてのテキストをhtml

  3. スタイル コードを htmlnl で記述します。例:

  4.     @font-face {
            font-family: 'myfont';
            src: url('./common/assets/font/myfont.ttf');
        }
        * {
            font-family: 'myfont';
        }
    ログイン後にコピー
  1. コマンド プロンプト ウィンドウで、ディレクトリを html があるディレクトリに移動するには、コマンド font-spider *.html を入力して、ディレクトリ内のすべての HTML のフォントを変更します。取り出してパックします。

注:

  1. ページのテキスト コンテンツを頻繁に更新する必要がある場合は、

  2. 入力フォームを更新する必要があります。コンテンツでもカスタマイズされたフォントが使用されている場合は、この記事で説明されている方法を放棄してください。サーバー側のレンダリングを通じてフォント パッケージを動的に生成することを検討するか、完全なフォント パッケージをページに正直に導入することができます。

以上がノードフォント圧縮プラグイン font-spider の使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート