Web フォントの読み込みを最適化する方法をご存知ですか?

Web フォントの読み込みを最適化する方法をご存知ですか?
タイトル通りです!

一般的に使用される font-family はブラウザの組み込みフォントを読み込みますが、CSS3 の新しいタグ @font-face を使用して TTF フォントを読み込むと、生成されるトラフィックが非常に大きくなります。特に中国語フォントの場合。

最近はフォントも多様化しています。フォントをスムーズに読み込むにはどうすればいいでしょうか?

今日、China Fonts http://font.chinaz.com/ からいくつかの中国語フォントをダウンロードし、ブログに貼り付けて読み込もうとしましたが、読み込みが非常に遅いことがわかりました。

中国語のTTFフォントは8M以上あります。読み込みと表示にはどれくらい時間がかかるのでしょうか?

それから、この中国語フォントのウェブサイトはどうやってこんなにたくさんのフォントをロードできるのかと思いました。フォントの中には画像もありますが、入力したフォントをプレビューする機能も提供されています。

解決策は何でしょうか?ご存知の方はご返信ください。

<<:  MySQLの使い方の詳細な説明

>>:  Angularの親子コンポーネント通信の詳細な説明

推薦する

LinuxベースのApacheウェブサイトサービス構成の詳細な説明

オープンソース ソフトウェアである Apache は、最も広く使用されている Web アプリケーショ...

IISMonitor を使用して Web ページを監視し、IIS を自動的に再起動します。

目次1. ツールの紹介2. ワークフロー3. 操作インターフェースとパラメータ設定(1)監視と再起動...

CSS3 はアニメーション属性を使用してクールな効果を実現します (推奨)

animation-name アニメーション名。複数のアニメーションがバインドされていることを示す...

Node.jsを理解するのはとても簡単です

目次Node.js の公式紹介Node.jsのコア開発言語ウェブ上の JavaScript と No...

JavaScript配列の一般的なメソッドの概要

目次1. はじめに2. フィルター() 3. マップ() 4. ソート() 5. 減らす() 6. ...

スクリプトを使用して、ワンクリックでDockerイメージをパッケージ化してアップロードします。

著者は1年以上マイクロフロントエンドプロジェクトに取り組んできました。チームは10個のマイクロアプリ...

CentOS IP接続ネットワーク実装プロセス図

1. システムにログインし、ディレクトリに入ります: cd /etc/sysconfig/netwo...

Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...

スーパーバイザーによるDockerfileのマルチサービスイメージパッケージ操作

Dockerfileの作成yumソースを設定する cd /tmp/docker vim Docker...

Vueページの初回読み込み最適化の全プロセス

目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...

背景属性の8つの属性値の詳細解説(面接の質問)

CSSの背景プロパティの値背景色背景画像背景繰り返し背景位置背景添付複合プロパティ: 背景: ba...

ウェブページ制作をマスターするために必要な6つのスキルのまとめ

ウェブデザイナーはジェネラリストであると言わざるを得ません。グラフィックデザイナーは、さまざまな特殊...

VM VirtualBox 仮想マシンのマウント共有フォルダ

一つの環境CentOS 7にVMware Toolsをインストールしてホストの共有フォルダへのアクセ...

Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...

nginxアクセス制御の実装例

高性能で軽量なウェブサービスソフトウェアであるNginxについて高い安定性 システムリソースの消費量...