機能について調べました。これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。テキストとフォントの基礎。学習目標:サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。プロパティを使って制御できます。これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。sans-serif;}このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。いわゆるウェブセーフフォントです。フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。(訳注:日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。中国語環境なら、中国語の漢字が使われることでしょう。戻って、非常にうまく動作する代替手段があります。ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。必要な構文は次のようになります。ブロックがあり、ダウンロードするフォントファイルを指定します。中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。serif;}構文はこれより少し複雑になります。以下で詳しく説明します。ウェブフォントに関して留意すべき重要な点が2つあります。ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。版のフォントを含める必要があるかもしれません。必要なコードの生成方法を下の方で示します。フォントは一般に自由に使用できません。それらの代金を払わなければなりません、そして/またはコードの中で(またはサイトで)フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。フォントを盗み、適切なクレジットを与えずに使用するべきではありません。ウェブフォントの例この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。ファイルを使用する必要があります(ライブの例を見る)。ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。フォントを探すこの例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。最初に、フォントを含むフォントファイルを見つける必要があります。フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。フォントを入手できるサイトは、一般的に3種類あります。これは無料フォントをダウンロードできるサイトです(フォント作成者へのクレジット表示などのライセンス条件が他にあるかもしれません)。フォントを有料で利用できるようにするサイトです。フォント製造元から直接フォントを購入することもできます。これはあなたに代わってフォントを保存し提供するサイトで、全体のプロセスをより簡単にします。詳細については、オンラインフォントサービスの使用のセクションを参照してください。フォント)、段落にはやや派手で読みやすいフォントです。ファイルと同じディレクトリ内にファイルを保存します。Fonts)かは関係ありません。ファイルで配布されます)。italic(細字イタリック)など、利用可能なさまざまな異形(variant)を持つファミリーとして配布されるフォントがあります。この例では、それぞれの選択に対して1つのフォントファイルに関心を持ってほしいと思います。classifications(分類)をクリックして表示された選択肢を絞り込むことができます。(訳注:残念なことに現在のところ日本語フォントはないようです。今、必要なコード(そしてフォント形式)を生成する必要があります。フォントごとに、次の手順に従います。商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。Generator(ウェブフォントジェネレータ)に行きます。Fonts(フォントのアップロード)ボタンを使って2つのフォントファイルをアップロードします。(はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。)というチェックボックスをオンにします。kit(キットをダウンロードする)をクリックします。同じディレクトリに保存してください。デモでのコードの実装この時点で、生成したばかりのウェブフォントのキットを解凍します。解凍したディレクトリ内には、3つの便利なアイテムがあります。ブラウザーのサポート要件が変わると、提供される正確なフォントも次第に更新されます)。ブラウザーにこれらをロードして、フォントがさまざまな使用状況でどのように見えるかを確認します。コードが含まれています。デモにこれらのフォントを実装するには、次の手順に従います。ように簡単でシンプルなものに変更します。どれよりも前の一番上に配置する必要があります。追加します(必要に応じて調整します)。これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。serif;デモページに実装されたいくつかの素晴らしいフォントを持つデモページの完成です。異なるフォントは異なるサイズで作成されるので、外観や雰囲気を整理するためにサイズ、間隔などを調整する必要があります。見てください(完成した例をライブで実行してください)。コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。注目に値する例外を除いて、サブスクリプションベースです。迅速なテスト作業やデモの作成に便利な無料サービスです。これらのサービスのほとんどは使いやすいので、詳細には説明しません。フォントを簡単に見てみましょう。すれば、アイデアを得ることができます。コピーを使用してください。左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。Japanese(日本語)を選んでも、中国語のフォントも表示されます。フォントによっては、存在しない文字があるようなので注意しましょう。日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。