Html5カスタムフォントソリューション

アプリケーションシナリオ

font-faceを使用した結果、フォントパッケージが約10Mと大きく、10Mのトラフィックを要求するたびにサーバーが圧迫され、ユーザーエクスペリエンスに影響を与えることがわかりました。

ステップ1：@font-faceを使用する

MDN の概要

これは@font-faceと呼ばれるCSSの@ルールで、ウェブ開発者がウェブページにオンラインフォントを指定できるようにするためのものです。作成者が独自のフォントを提供できるようにすることで、@font-faceはユーザーのコンピュータのフォントに依存する必要をなくします。この@font-faceは、CSSのトップレベルだけでなく、@ruleの条件ルールグループにも配置することが可能です。

簡単に言うと、Webページで独自のフォントパッケージを使用することができます。メディアクエリなどの@ルールの中に入れることができるのです。

使用方法

font-face CSS at-ruleは、テキストを表示するためのカスタムフォントを指定します。このフォントは、リモートサーバーから読み込むことも、ユーザーがローカルにインストールしたフォントから読み込むこともできます。フォントは、リモートサーバーから読み込むことも、ユーザーがローカルにインストールしたフォントから読み込むこともできます。ユーザーからローカルに指定されたフォント名を検索するために local() 関数が提供され、一致するものがあれば、ローカルのフォントが使用されます。それ以外の場合は、url()関数でダウンロードしたリソースがフォントに使用されます。

作者が独自のフォントを提供できるようにすることで、@font-faceはいわゆる"web-safe"フォント（一般的なので広く使える）に制限されずにコンテンツをデザインすることを可能にします。ローカルにインストールされたフォント名を検索して使用するように指定することで、基本的なフォントよりも多くのカスタマイズが可能になり、ネットワークに依存することなくそれを行うことができます。

url()関数とlocal()関数の両方を使用した場合、ユーザーがローカルにフォントのコピーを見つけられなかった場合、ユーザーがインストールしたフォントのコピーを必要に応じて使用するために、ユーザーがダウンロードしたコピーを使用してフォントを見つけます。
font-faceルールは、CSSのトップレベルで使用されるだけでなく、あらゆるCSSの条件グループルールの中で使用することができます。

単純に言えば、@font-faceはWebセキュリティの制約を破り、作者はそのlocal()関数を拡張することなく、任意のcss条件付きグループルールで好きなフォントを自由に使えるようになるのです。

日常的な使い方の投稿はこちら

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),// suffix is font file format common ttf svg etc
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

オンラインフォント変換サイトはこちら フォント書式変換

ステップ2：フォントパッケージの圧縮

一旦導入に成功した後、フォントパッケージが大きすぎることがわかります。ここでは、フォントパッケージ圧縮ツール font-spider を使って、フォントパッケージの圧縮を行います。

font-spiderは

ファンダメンタルズ

htmlの中で使われているテキストをマッチングさせ、残った未使用のテキストを削除することで フォントパッケージの圧縮という目的を達成することができます。

インストール方法

npm install font-spider -g 

node npmがインストールされていない場合は、インストール方法をご覧ください。

使用方法

@font-face {
    font-family: mysimhei;
    src: url(... /... /... /simhei.ttf);
}
p{
    font-family: mysimhei;
}

なお、これを使用する場合は、まずcssファイルに以下のように導入する必要があります。

font-spider . /demo/*.html

ここでの*記号は、すべて一致を意味します。また、htmlを指定することもできます。

font-spider . /demo/*.html . /demo/pages/index.html

複数のファイルをスペースで区切る

圧縮完了

圧縮されたフォントパッケージと一緒にバックアップフォントファイルが生成されます。

雑記帳

実際には、それは香港のビジネスをドッキングすることです、香港のwin10のオペレーティングシステムは驚くほど太字は、顧客はフォントがフォントパッケージと大きすぎるに、経験に同じ影響ではないと感じているので、フォントにも圧縮ソリューションにこのセットを見つける。(謙虚なインターン)

上記はこの記事の全体の内容です、私はそれがあなたが学ぶために役立つことを願って、私はあなたがより多くのスクリプトハウスをサポートすることを願っています。