CSSでカスタムフォント（font-face）を導入する方法の詳細な説明

なぜこれを使ったのか？それはポスターを作ることから始まりました。それは嵐の夜でした。 。 。

さて、無駄話はやめて本題に戻りましょう。なぜこれを使うのでしょうか? ブラウザにフォントがないからです。

じゃあなぜ私に言う必要があるんですか？私自身は、読んだり学んだりするために w3cschool に行くつもりはありません。はい、でも私が提供できればもっと早くて簡単じゃないですか

使い方

@フォントフェイス{
     font-family: 'フォントに任意の名前を付けることができます'; 
     src: url('../font/フォント名.eot');
     src:url('../font/フォント名.woff') format('woff'),
         url('../font/フォント名.ttf') フォーマット('truetype'),
         url('../font/フォント名.svg') フォーマット('svg');
}

// HTML コードに h1 またはその他のテキストを追加し、その中に必要な特別なテキストを記述します h1{font-size:36px; color:#ccc;font-family: "font name is up to you";}

ここで終わりです。ご視聴ありがとうございました（おい、卵を投げたりキャベツを折ったりするのはやめてくれないか？話は続けるから）；

1. フォントがどこにあるかが重要です。使い方は分かっていますが、フォントがなければ役に立ちません。 。

フォントダウンロード: https://www.jb51.net/fonts/

ここでは、当社のシステムで一般的にサポートされているフォントを見つけてダウンロードし、フォント フォルダーに配置することができます (フォント フォルダーは、CSS や画像と同じレベルにすることができます)

2. ダウンロードしたフォントが大きすぎるため、パフォーマンスが低下します（そうでない場合は多くの問題が発生します）

解決策: Zizhu (フォントの必要な部分を抽出できますが、通常は数 KB しかないため、問題ありません)

フォントスパイダー公式サイト: http://font-spider.org/

1) Zizhu を使用する場合は、まずフロントエンドとして適切な node または git をインストールする必要があります。

2) インストール後、font-spiderのインストールを開始します。コマンドラインまたはgitを使用して、次の文をコピーします。npm install font-spider -g Taobaoミラーを使用することもできます。

3) 長い待ち時間の後、インストールが完了したら、まず font-spider -V をテストできます。バージョン番号を見ると、正常にインストールされたことがわかります。

4) ダウンロードした数メガバイトのフォントを、先ほど説明したフォント フォルダーに入れることを忘れないでください。

5) 新しい CSS スタイルシートを作成し、フォントを定義して、次の内容をコピーし、font に先ほど付けたフォント名を入力します。このようにして、フォントのすべての形式が定義されます。

@フォントフェイス{
     font-family: 'フォントに任意の名前を付けることができます'; 
     src: url('../font/フォント名.eot');
     src:url('../font/フォント名.woff') format('woff'),
         url('../font/フォント名.ttf') フォーマット('truetype'),
         url('../font/フォント名.svg') フォーマット('svg');
}

// HTML コードに h1 またはその他のテキストを追加し、その中に必要な特別なテキストを記述します h1{font-size:36px; color:#ccc;font-family: "font name is up to you";}

6) 重要なステップは、必要な略語を生成することです。git または node に font-spider+space+path と入力します: font-spider ./demo/*.html

例えば：

ディスクがルートディレクトリにある場合は、 font-spider demo.html
直接使用できます。 font-spider demo.html


または

font-spider C:\Users\13246\Desktop\cropper\demo.html

もちろん、これはデモンストレーションなので、具体的なパスはお使いのコンピュータによって異なります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。