cssのカスタムフォント。 CSSを使用したカスタムフォント。埋め込みフォントの使用の難しさ

この章の最初の部分では、CSSフォントの概要について説明します。このページでは、CSSにフォントを含める方法、Webフォントとは何か、フォントの操作方法、フォント形式、GoogleFontsの使用方法について学習します。まず、CSSフォントを接続する簡単な例を見てみましょう。

P（フォントファミリ：Verdana;）

この小さなコードは、すべてのタグが

フォントはVerdanaです。 font-familyプロパティは、使用するフォントまたはフォントファミリを指定します。ユーザーのブラウザでこのスタイルが正しく表示されるかどうかは、指定したフォントがコンピュータにインストールされているかどうかによって異なります。この場合、ユーザーのコンピューターにVerdanaフォントがない場合、ブラウザーはデフォルトのフォントを表示します。

かつて、設計者は、ユーザーのコンピューターにメインフォントがない場合に備えて、いくつかのフォールバックフォントを追加で指定する必要がありました。 Verdanaフォントを使用してテキストのスタイルを設定し、フォールバックとしてTrebuchet MS、Genevaフォント、および任意のサンセリフフォントをインストールするとします。それはこのように書かれています：

P（font-family：Verdana、 "Trebuchet MS"、Geneva、sans-serif;）

このコードを処理するとき、ブラウザーは最初にユーザーのコンピューターにVerdanaフォントが存在するかどうかを確認します。フォントが存在する場合、タグのコンテンツ

このフォントで表示されます。フォントが欠落している場合、ブラウザはリスト内の次のフォントであるTrebuchetMSをチェックします。このフォントがない場合は、次のフォント（Geneva）がチェックされます。ユーザーがジュネーブを持っていない場合、ブラウザは別の利用可能なサンセリフフォントを選択し、それとともにテキストを表示します。

注意：コードでは、TrebuchetMSフォントの名前を引用符で囲んで書き留めました。スペースが含まれている場合は、フォントの名前を二重引用符または一重引用符で囲む必要があります。

セリフとサンセリフのフォントが何であるかについては、ウィキペディアのページで読むことができます。

Webフォント

上記のフォントの使用方法には大きな欠点があります。フォントの数に制限があります。ほとんどのコンピューターにインストールされている可能性が最も高いオプションのみに満足する必要があります。

ページデザインを個性的にし、オリジナリティを追加するために、フォントの選択肢を増やすにはどうすればよいですか？ Webフォントが役に立ちます。の章を読んで、それらを操作する方法を見つけてください。

したがって、ユーザーのブラウザーに目的のフォントを表示するには、このフォントをユーザーのコンピューター自体にダウンロードする必要があります。これは非常に簡単に実行できます。フォントをCSSに接続するこの方法は、デザイナーにとって本当に素晴らしい機会を開きます。しかし、軟膏のハエについて言及する価値があります。まず、すべてのブラウザが特定のフォント形式をサポートしているわけではありません（これにより、フォントが表示されなくなります）。次に、フォントを含むファイルの重みが大きい場合、速度が低下する可能性があります。ページをダウンロードします。

フォーマットのサポート

ファイル形式の不一致の問題に対処するにはどうすればよいですか？最も人気のあるフォント形式を示す表を見て、どのブラウザがそれらをサポートしているかを見てみましょう。

注意：フォントフォーマットのサポートに関する最新情報は、caniuse.comでいつでも見つけることができます。検索バーに、フォーマット名（たとえば、ttf）を入力する必要があります。

最新のブラウザをターゲットにしている場合は、TTFフォント形式を使用する必要があります。これは最も一般的で使用されている形式です。 1つのフォントの複数の形式が必要な場合は、ある形式から別の形式への特別なオンラインコンバーターを使用して、すべてのファイルを1つずつ接続できます。したがって、ブラウザは動作するフォント形式を選択できます。

@ font-faceを使用してWebフォントを含める

MyUniqueFontというTTF形式の独自のフォントがあり、Webページのメインテキストをこのフォントで表示したいとします。最初に行うことは、フォントファイルを他のすべてのサイトファイルが配置されているフォルダーにコピーすることです。煩雑さを避けるために、フォントなどの名前を付けた、フォント専用の別のフォルダーを作成できます。

@ font-face（font-family：MyUniqueFont; src：url（ "fonts / MyUniqueFont.ttf"）;）

この場合、font-familyプロパティは別の役割を果たします。これを使用して、フォントに名前を割り当て、スタイルを作成するときにこの名前を使用できるようにします。

P（フォントファミリ：MyUniqueFont;）

2行目は、フォントファイルへのパスを指定します。この例では、MyUniqueFont.ttfファイルはfontsフォルダーにあります。 URLが異なる場合があります。

Googleフォント

Googleでは、GoogleFontsのコレクションから任意のフォントを簡単に接続できます。好きなフォントを使い始めるために必要なのは、Googleのフォントページでいくつかの設定を指定し、このフォントへの特別なリンクをコピーしてWebドキュメントに追加することだけです。

注意： Googleのフォントのコレクション全体がサイトで入手できます Googleフォント..。このページでは、さまざまなフィルターを使用して、カテゴリー、太さ、アルファベットでフォントを検索できます。

以下では、Googleからフォントを接続する各ステップについて説明します。これが何であるかを理解するには、Google Fontsページから任意のフォントを選択し、[クイック使用]ボタンをクリックして開きます。

ステップ1：顔を選択する

まず、選択したフォントのページに、そのスタイルのオプションと、フォントの読み込み速度を意味するスピードメーターアイコンが表示されます。フォントに選択するスタイルが多いほど、ダウンロードに時間がかかります。したがって、使用する予定の書体オプションのみを選択することをお勧めします。

ステップ2：アルファベットを選択する

さらにこのページでは、ラテン文字、キリル文字などの文字セットを選択できます。フォントによっては、すべてのアルファベットのバリエーションが使用できるとは限りません。前のポイントと同様に、必要なアルファベットの前にのみチェックマークを付けることをお勧めします。

ステップ3：サイトにコードを追加する

最初の方法では、フォントのダウンロード元からHTMLコードにGoogleサーバーへのリンクを追加します。既製のコードをコピーして、タグの間に配置する必要があります HTMLドキュメント内。例：

...

2番目の方法は、@ importディレクティブを使用してフォントを接続することです。完成したコードは、選択したGoogleフォントのページのポイント3の2番目のタブにあります。スタイルシートの最初に追加する必要があります（そうしないと、ファイルはインポートされません）。コードは次のようになります。

@import url（http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic）;

最初の方法の特徴は、使用する予定の各ページの見出しにフォントへのリンクを追加する必要があることです。これは、ページ数が少ないサイトでは簡単に実行できますが、リソースが大きい場合は問題があります。 2番目の方法は、コードを外部スタイルシートの最初に配置でき、このテーブルが接続されているすべてのページが必要なフォントを受け取り、@ importディレクティブを使用して読み込まれるため便利です。

ステップ4：スタイルを作成する

前の手順を完了したら、フォントの適用を開始できます。このようなCSSルールがどのように記述されているかを以前に見てきました。

P（font-family： "Roboto"、sans-serif;）

最初のステップでフォントにいくつかのオプションを選択した場合（たとえば、太字のBold 700のバリアントを追加した場合）、3番目のステップでコードがわずかに変更されます。

@import url（http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic）;

次にフォントを太字にするには、CSSスタイルを次のように記述します。

P（font-family： "Roboto"、sans-serif; font-weight：700;）

注意： Google Fontsは、フォントの太さを示すために100〜900の従来の単位のみを使用します。たとえば、通常（デフォルト）は400（通常）に相当し、標準の太字は700（太字）に相当します。

GoogleFontsサービスの主な利点は次のとおりです。

使いやすさ（初心者でもサービスを理解でき、必要なコードはすべて自動的に生成されます。コピーするだけです）。
フォントの入手可能性（それらにお金を払う必要はありません）;
使用されているすべてのフォント形式が提供されます（これは、すべてのブラウザーが、動作するフォント形式を正確にダウンロードできることを意味します）。

このサービスの欠点の中には、フォントの種類がそれほど多くないこと、特にキリル文字があります。ちなみに、インターネット上にはTypeKit（有料）など他の同様のサービスがあります。

結果

現在、オリジナルフォントと非標準フォントをWebページに接続するためのいくつかのオプションがあります。これらの方法にはそれぞれ長所と短所があります。どのオプションを使用するのが良いか、あなたは自分で決める必要があります。多くの場合、状況によって異なり、さまざまなケースでさまざまなアプローチが役立つ場合があります。この時点で、CSSでフォントを使用する方法を知っている必要があります。

「ペイントされた」フォントを要求する気まぐれな顧客に出くわしたことがありますか？それとも、スタイリッシュなテーマ別サイトを作成しているだけで、テキストをカスタムで作成すると、作成者のアイデアが強調されますか？この問題を解決する方法の1つを考えてみましょう。

必要なとき

まず、非標準フォントが必要になる可能性のある最も正当なケースを見てみましょう。

スタイリッシュなメニュー。
スタイリッシュなヘッダー.
ロゴ。ロゴの作成は深刻な問題であり、このテーマについて多くの本が書かれています。専門家がこのビジネスを研究するには長い時間がかかります...そして著者は人々からパンを奪うのではなく、自分の5つのコペイカを挿入します。ロゴがテキストの場合は、高品質のSEO最適化のためにテキストとして表示します。

タスクは、非標準のフォント、つまりインターネットリソースのユーザーに存在しない可能性が高いフォントを使用することです。

ソリューション

ほとんどの場合と同様に、どのタスクにもいくつかの解決策があり、私たちの解決策も例外ではありません。行く：

画像。カスタマイズの柔軟性がなく、ページの読み込み速度が低下し、サーバーの負荷が増加し、SEOはまったく機能していません。
閃光。アップロード用の追加ファイル、Flashエディターのスキル（ここでもテキストパラメーターを変更）、平均的なSEOが必要です。
JS。追加の外部ファイル（およびこれに由来するすべてのもの）、平均的なSEO、テキストはコピーできません。
CSSを使用したカスタムフォント

侍の真の道、または「長生きCSS」

@ font-face cssルールは、この問題の解決に役立ちます。これにより、特定のフォントをドキュメントにロードして、その設定を決定できます。

@ font- face（font- family：AlexBrush- Regular; src：local（ "AlexBrush-Regular"）、url（ "./AlexBrush-Regular。otf"）;）

したがって、訪問者のOSで選択したフォントが不要になります。

このタイプの構造では、TrueType（ttf）フォントとOpenType（otf）フォントを接続できます。

面白い： OpenTypeは、TrueTypeよりも多くのプリプレス機能を備えており、小さいファイルサイズで大きい文字セットをサポートします。

このトピックは閉じられたように見えますが、1つあります...私たちの「特別な」友人、つまりIEブラウザを思い出してみましょう。 IEにカスタムフォントを埋め込むには、フォントがEmbedded OpenType（eot）形式である必要があります。

これは、IE機能が害よりも優れている唯一のケースではありません。実際のところ、eot形式は次のことを意味します。

暗号化。このファイルにはプロジェクトのアドレスに関する情報が含まれているため、攻撃者はフォントを盗んでWebサイトにアップロードすることはできません。
圧縮。フォントファイルが圧縮されるため、ダウンロード時間が短縮されます。

上記に注意して、例を変更します。

@ font- face（font- family：AlexBrush- Regular; src：local（ "AlexBrush-Regular"）、url（./ AlexBrush- Regular .eot）;）@ font- face（font- family：AlexBrush- Regular; src ：ローカル（ "AlexBrush-Regular"）、url（ "./AlexBrush-Regular。otf"）;）

実際の経験から、バグを修正してブラウザの認識を改善するには、この例を改善する必要があることが示されています。

@ font- face（font- family： "AlexBrush-Regular"; src：url（ "AlexBrush-Regular.eot"）; src：url（「AlexBrush-Regular.eot？#Iefix」）format（ "embedded-opentype"）、url（ "AlexBrush-Regular.svg＃JournalRegular"）フォーマット（ "svg"）; url（ "AlexBrush-Regular.woff"）形式（ "woff"）、url（ "AlexBrush-Regular.otf"）形式（ "truetype"）、）

重要！！！

柔軟性..。テキストパラメータの設定と変更は簡単です。
速度..。ロードする追加ファイルの最小数は、jsとFlashの同じ数の要素のようにページの速度を低下させません。
SEO..。テキストはテキストのままでした-プラスは明らかです。
この例は、IE4、Op、Fx3.5、Cr2、Sa1で始まるブラウザーで機能します。
フォントを使用する前に、フォントを最適化する必要があります（後書きを読んでください）。
市販のフォントを使用する場合は、その安全性について心配する必要があります。
通信チャネルの帯域幅が小さい場合、フォントファイルがロードされるまで、ユーザーには非標準フォントではなく単純なフォントが表示されるか、まったく表示されません。

あとがき。

フォントの最適化

文字のセットを作成するとき、開発者は、ターゲットオーディエンスをできるだけ広くカバーするために、最大の機能をロードしようとします。これに基づいて、文字、数字、句読点、追加のアイコン、さまざまな種類のスタイル、さまざまなフォントの太さなどを入力します。

このような努力の結果、フォントファイルは数十MBのマークを超える可能性があります。そのような多様性が必要ですか？確かに、辛味のある文体的なタッチを与えるために、私たちは（状況に応じて）必ずしも句読点やさまざまな記号を必要としません。実際には、異なるスタイルが常に必要なわけではありません。または、Runet用にサイトを厳密に最適化しているとしましょう。ラテン語なしで実行できます...

さて、あなたはすでに要点を持っています。フォントを最適化する必要があります。

実際の問題の解決に役立たないコンテンツはすべて削除します。
ファイルを必要な形式に変換します。

どうやるか？インターネット上には、必要な操作を実行できるサービスがいくつかあります。たとえば、font-face Generator、Online Font Converter、Web FontOptimizerなどです。

保護

高品質で機能的な書体の開発には時間がかかるため、多額の費用がかかります。購入した（合法的に）すべてのフォントは登録されており、知的財産を構成します。

フォントを購入すると、Web上で使用する権利がありますが、侵入者がリソースからフォントをダウンロードした場合、サイトの所有者が開発者に生じた損害について責任を負います。フォントを保護するにはどうすればよいですか？

IEでは、すべてが私たちの前で考えられています-eot形式の保護はすでに組み込まれています。他のすべてのオブザーバーにとって、明確な解決策はまだありません。

もちろん、新しい開発もあります。たとえば、保護の問題がeotと同様に削除される、WOFT形式ですが、残念ながら、まだ完全なブラウザサポートを誇ることはできません。

また、フリーフォントを適用することもできます。

Webデザイン用のフォントの選択が標準的な、いわゆる「安全な」タイプセットに限定されていた時代は過ぎ去りました。これは、Arial、Arial Black、Comic Sans MS、Courier New、Georgia、Impact、Times New Roman、Trebuched MS、Verdanaの9つのフォントで構成されていました。 Webページの外観をデザインするためのハイパーテキストマークアップ言語とカスケードスタイルシートの開発により、これらのフォントがユーザーのコンピューターにインストールされているかどうかに関係なく、サイトデザインでほぼすべてのフォントを使用できるようになりました。

サイトで元のフォントを使用するには、フォント自体を用意し、特定の形式にしてサイトに接続する必要があります。これがどのように行われるか見てみましょう。

フォントをサイトに接続する方法
非標準フォントをサイトに接続するには、少なくとも2つの方法があります。

クイックフォント自体が特殊なサードパーティリソースからロードされたとき。
普通、接続に必要なすべての形式のフォントが、サイト全体と同じサーバーのテンプレートのフォルダーの1つに保存されている場合。

簡単な例を使用して、両方の方法を考えてみましょう。

特別なサービスを使用したWebサイトへのフォントの高速接続
さまざまな興味深いフォントを保存し、さまざまなサイトでそれらを使用する機能を提供するさまざまなサービスがあります。そのようなサービスの1つがGoogleFontsです。これに基づいて、フォントの接続は次のように実行されます。
別の同様のサービスは、WebFont.ruWebサイトです。フォントの接続は、多くの点で上記の例と似ています。
他のサービスから独立したフォント接続
サードパーティのサービスに依存しないように、フォントをホスティングまたはサーバーに直接保存してテンプレートに接続することをお勧めします。これを達成するのはやや難しいですが、このタスクが不可能になるほどではありません。

フォントファイルをコンピューターにダウンロードします。ほとんどの場合、フォントは次の形式でダウンロードできます。 TTF-Appleによって開発され、多くの最新のオペレーティングシステムでサポートされているTrueTypeフォント。
クロスブラウザの互換性、つまり、異なるWebブラウザでのフォントの互換性と同じ表示を保証するには、次の形式でフォントをサイトに接続する必要があります。 ttf, eot, woff, svg..。、などのオンラインサービスを使用して、元のフォントファイルを必要なすべての形式に変換できます。
これらのサービスはすべて、ある程度の変換中にフォントをわずかに歪めることに注意してください。と呼ばれる特別なユーティリティ FontPrep..。ただし、これはMacOSオペレーティングシステムのみを対象としています。
サイトへの接続に必要なすべての形式を受け取ったら、テンプレートに別のフォルダーを作成します フォント受信したファイルをコピーします。
フォントのサイトへの接続は、ルールを使用して行われます。 @ font-face次のように。
最もシンプルで最も楽しい部分は残っています-カスタムフォントを任意のデザイン要素に割り当てます。たとえば、ページ全体は次の例のようになります。
体（
font-family： "ALSStory";
フォントサイズ：12px
）パラメータfont-familyで、@ font-faceルールの同様の値に従ってフォントの名前を指定する必要があります。

検討された方法により、特殊なサービスでは利用できない非標準のフォントを接続できます。

記事の結論として、サイトの装飾に夢中になったり、多くの非標準フォントをインストールしたりしないことをお勧めします。プラグインする新しいフォントごとに、サイトの各ページのサイズが大きくなり、ユーザーの読み込み速度が遅くなることに注意してください。

先日、もう一度腕立て伏せを始めることにしました。私が尊敬するある講義は、この演習が正しく行われた場合、ほとんど魔法の効果があると主張しています。

さて、自分で実験をして、飛び降りにくくするために、「実験ノート」を公開して、廃ブログに投稿することにしました。

古いデザインは新しいアイデアと一致しませんでした、そして私はためらうことなく、私が多かれ少なかれ好きなものを一般的なWordPressリポジトリから取り出しました。

そこから取得した既製のテンプレートの問題点を知っていますか？ 問題は、キリル文字フォントとの不器用な互換性です。私の場合、ヘッダーが影響を受けました。 CSSで参照されるフォントにはロシア語の文字が含まれていなかったため、これらはデフォルトのフォント（SansまたはArial）から取得されました。結局、見出しは巨大で、全体の外観を台無しにしました。私は考えなければなりませんでした フォントを置き換えるよりも。

これを行うにはいくつかの方法があります。

方法1：ダム

つまり、インターネット上で適切なフォントを見つけ、それをコンピューターにインストールし、CSSで記述して、意図したとおりにサイトを表示するという事実に要約されます。

他の人は、せいぜいデフォルトのフォントでそれを見続け、最悪の場合、分散さえします。

そうしないでください！

方法2：デザインを標準フォントに変換する

これは最も理想的なオプションです。、しかし、残念ながら、それが原因でデザインの「熱意」が失われることがあるため、常に適切であるとは限りません。ただし、常にこのアプローチを検討してください。どんなに努力しても、クライアントコンピューターが使用可能なフォントを使用する可能性があるためです。

ほとんどすべてのオペレーティングシステムで使用されている安全なフォントは次のとおりです。Verdana （テキストに最適）、インパクト （見出しが非常に得意な場合もあります）、Arial、Arial Black、Comic Sans MS （初心者が大好きなカカ）、Courier New （コード例とフォームに適しています）、ジョージア、タイムズニューローマン、トレビュシェットMS。

方法3：テキストの代わりに画像

このオプションは非常にクロスブラウザであり、静的要素に適しています。例-サイトヘッダー。希望のフォントのテキストで透明なPNGを作成し、必要に応じて処理してサイトに挿入します。ALTを入力することを忘れないでください。または同じことですが、テキストを背景に貼り付けてJPGで保存します。

ヘッダーに加えて、投稿のタイトルとウィジェットの外観を変更する必要がありました。さて、各エントリのタイトルで別々の写真を作成しませんか？

サーバーサイドスクリプトを使用して見出しテキスト付きの画像を生成する職人がいますが、これはすでに倒錯しています。

方法4：Cufon

これらのアプレットは、オンラインジェネレーターhttp://cufon.shoqolate.com/generate/を使用してフォントファイルから生成できます。

最も簡単な方法は http://www.google.com/fonts提示されたフォントから目的のフォントを選択し、サイトに（ヘッドとスタイルファイルに）挿入する必要がある既製のコードを取得します。その後、すべてが機能します。

しかし、余分なJavaScriptを使用したり、アプレットの生成に煩わされたりしたくありませんでした。私はすべてを素早く簡単にやりたかったのです。さらに、必要なフォントのファイルは長い間利用可能でした。

方法4：CSSを使用してフォントをサイトに接続します

インターネットには、このトピックに関するチュートリアルがたくさんあります。しかし、そのうちの5つを試した結果、悲惨な結果になりました。私のTTFフォントはIEでしかうまくレンダリングされませんでした。他のブラウザでは、容赦なくArialに置き換えられました。

私はIEのファンではないことを告白し、ブラウザをダウンロードするためのブラウザだと考えています。もういや！だから私は少し改善しなければなりませんでした。

CSSを使用してフォントをサイトに接続するには、フォント自体（ファイル）とオンラインコンバーターhttp://onlinefontconverter.com/が必要です。

多種多様なオンラインフォントコンバーターが存在する可能性があります。一部が閉じられ、代わりに新しいフォントが表示されるため、この特定のフォントがまだ存在しない場合は、検索エンジンで「オンラインフォントコンバーター」などのクエリを検索し、そこでフォントを変換してみてください。この投稿では、特定のコンバーターを例として使用します。

1.コンバーターのWebサイトにアクセスします 、お持ちのフォントを取得して、このウィンドウにドラッグします（通常は右側の列にあります）。

2.フォントをダウンロードします 4つのバリエーション：EOT、OTF、TTF、WOFF。 これで十分です。ブラウザは、ページをレンダリングする過程で、より便利なものを選択してダウンロードします。

3.フォントを入力します ウェブサイトに。 サイトのルートにこのためのフォルダを作成しました 「F」そこに置きました。

2015年2月16日更新：現時点では onlinefontconverter.com作り直され、提供されたフォントはどれもそれによって変換されませんでした（（

私はウェブサイトfont2web.comを使わなければなりませんでした。これは、必要なすべてのフォントを1つのアーカイブにまとめて一度に提供します。便利！

4.フォントの読み込みをサイトに接続します。 これを行うには、cssファイルまたは対応するスタイルタグにこのコードを入力します。

@ font-face（font-family：EtoMoiFont; src：url（/f/myFont1.eot）、url（/f/myFont1.otf）、url（/f/myFont1.ttf）、url（/ f / myFont1。 woff）;）

フォントファミリー：EtoMoiFont;-ロードされたフォントの名前をブラウザに指示します。自分で名前を思い付く。

src：url（/f/myFont1.eot）、url（/f/myFont1.otf）、url（/f/myFont1.ttf）、url（/f/myFont1.woff）;-フォントファイルのパスと名前を指定します。

フォントがこの順序になっているのはなぜですか？

最初、置いた EOT. この形式は、古いバージョンのIEで使用されています。

2番目 — OTF. これは圧縮されたフォント形式であり、理論的には軽量です。

第3 — TTF. ほとんどすべてのブラウザがそれを理解しています。しかし、それはさまざまな方法で起こります。たとえば、iOSでは開かない場合があります。

最後 — WOFF. これはMacでよく読めるはずですが、まだテストする時間はありません。

5.スタイルファイルで指定します 見出し（この場合は見出し）を表示するフォントファミリ h2).

h2（font-family：EtoMoiFont;）

完了しました。

フォントが適用されていない場合は、次のことを確認してください。まず、cssファイルがサイトで使用されていること（キャッシュをリセットする必要がある場合、別のcssファイルを探す必要がある場合）、次に、フォントの使用が指定したクラス（IDまたはタグ）は、その後にロードされる別のcssファイルでブロックされません。

この方法の利点は、将来、このフォントを任意のテキストコンテナに設定できることです。

これが何が起こったのかです。

この方法の欠点は、一部の妄想的なユーザーのブラウザ設定で、外部フォント、フラッシュ、JavaScript、画像などの読み込みが禁止されている可能性があることです。

だから怠惰になってチェックしないでくださいロードされたフォントが無効になっている場合のサイトの外観。安全なもので遊んでみてください 方法2、次に再度ロードします。寸法がほぼ同じで、何も分かれていない場合は、順序があります。

そしてさらに！使用するフォントがインストールされていないコンピューターでのみメソッドをテストします。そうでなければそれは判明します メソッド番号1.

それで全部です。私はあなたと一緒でした。
次回まで。

すべてのウェブデザイナーは、美しいタイポグラフィを備えたウェブサイトを作成することを夢見ています。残念ながら、ブラウザはいくつかの書体、いわゆる「ウェブセーフ」フォントしかサポートしていません。標準セットには、次のフォントが含まれています。 Arial, ヴェルダナ, タイムズ, ジョージア, クーリエ新品と他のいくつか。

ヘッドセット 1つまたは複数のフォントのセットを定義します。各フォントは、重量、スタイル、デザイン、タイプ、密度、サイズなど、共通のデザイン機能を持つシンボルで構成されます。たとえば、サンセリフフォント（またはサンセリフ）、セリフフォント（アンティーク）などです。。書体は文字のセットで構成されます（数字、文字、句読点、特殊文字。アルファベット以外の文字で構成することもできます）。
フォント特定のサイズ、重さ、スタイルの文字のセットです。たとえば、Times New Romanイタリックスタイル16pxは1つのフォントであり、Times NewRomanイタリック10pxは異なります。

@フォントフェースルールさまざまなカスタムフォントを接続できます。ブラウザはフォントをキャッシュにロードし、それらを使用してページ上のテキストのスタイルを設定します。このアプローチはと呼ばれます フォントの埋め込み埋め込まれたフォントは Webフォント.

@ font-faceルールは、他のすべてのcssルールの前に配置する必要があります。これにより、ページのパフォーマンスが向上します。ダウンロードしたフォントは、サーバー上に作成された特別なフォントフォルダーに配置できます。

@ font-faceルールを使用してフォントを接続するには、次のものが必要です。
1）すべてのブラウザでサポートできるように、フォントファイルを複数の形式でサーバーにアップロードします。
2）フォントの名前を指定し、ファイルへのリンクを追加して、フォントの説明を設定します。
3）このフォントで表示される要素のfont-familyプロパティにフォントの名前を追加します。

@ font-face（font-family： "WebFont"; src：url（WebFont.eot？）format（ "eot"）、/ * IE8 + 、？記号を使用すると、src値ハンドラーのバグを回避できます* / url（WebFont.woff）format（ "woff"）、/ *すべての最新のブラウザー、IE9 + * / url（WebFont.ttf）format（ "truetype"）; / *すべての最新のブラウザー* /）p（font-family： "WebFont"、Arial、sans -serif;）

このコードは、要素内にテキストを表示するようにブラウザに指示します

WebFontの使用。何らかの理由でブラウザがこのフォントを読み込めない場合は、フォントのリストから適切なフォントを選択します。正常に使用できるフォントが見つかるまで、表示されている順序でループします。

各フォントファミリ内で、最大9つのウェイト（ウェイト）を定義できます。したがって、埋め込みフォントごと、およびスタイルごとに、個別の@ font-faceルールを設定する必要があります。 1つのルールで、2つの異なるフォントまたは同じファミリのフォントを宣言することはできませんが、スタイルと重みは異なります。

@ font-face（font-family： "WebFont"; src：url（WebFont.eot？）format（ "eot"）、url（WebFont.woff）format（ "woff"）、url（WebFont.ttf）format（ "truetype"）; font-weight：bold; font-style：italic;）@ font-face（font-family： "WebFont"; src：url（WebFont.eot？）format（ "eot"）、url（WebFont .woff）format（ "woff"）、url（WebFont.ttf）format（ "truetype"）; font-weight：400; font-style：normal;）

一般に、フォントには次のプロパティを設定できます。

@ font-face（font-family： "FontName"; src：url（）format（ ""）; font-variant ：; font-stretch ：; font-weight：; font-style ：;）

このフォントがユーザーのコンピューターにインストールされていて、ユーザーが使用可能であることを確認した後でのみフォントをロードする場合は、local（）値を使用してアドレスを設定できます。

@ font-face（font-family： "WebFont"; src：local（ "WebFont"）、url（WebFont.eot？）format（ "eot"）、url（WebFont.woff）format（ "woff"）、url （WebFont.ttf）format（ "truetype"）; font-weight：bold; font-style：italic;）

Webフォント形式

@ font-faceプロパティは優れたブラウザサポートを備えていますが、ブラウザが異なれば使用するフォント形式も異なります。 4つの主要なフォント形式があります。

WOFF形式（Web Open Font Format）、Mozillaによって開発されたオープンWebフォント形式。技術的には、WOFFは圧縮機能を備えた単なるラッパーであるため、フォント形式とは言えません。この形式は、インターネットで使用するためにフォントをTTF / OTF形式で圧縮します。また、WOFFを使用すると、ライセンス情報などのメタデータをファイルに追加できます。

OTF / TTFフォーマット（OpenTypeフォントとTrueTypeフォント）はほとんどのブラウザで動作します。どちらの形式も自由に配布されます。

EOT形式 Microsoftによって作成された（Embedded Open Type）は、TTFフォントの圧縮コピーであり、デジタル著作権管理（DRM）テクノロジによる再利用が禁止されています。 IE8以降でのみサポートされます。

SVG / SVGZ（Scalabe Vector Graphics）-ベクターフォントスタイルを表すフォントファイルの一種。通常、ファイルサイズが小さいため、モバイルデバイスでのパフォーマンスが向上します。 OperaMobileとiOSSafariで動作します。