Webデザインにおけるフォントの応用

最近、多くの人が Web ページのフォントの選び方の問題について言及しています。この問題は小さいものではありますが、フロントエンド開発においては根本的な問題です。現在の Web ページは依然としてテキスト情報が大半を占めており、フォントはテキスト表現の最も重要なパラメーターの 1 つとして、当然ながら非常に重要な役割を果たします。

こんにちは、皆さん~ 最近、多くの人がウェブページのフォントの選び方の問題について言及しています。この問題は小さいものではありますが、フロントエンド開発においては根本的な問題です。現在の Web ページは依然としてテキスト情報が大半を占めており、フォントはテキスト表現の最も重要なパラメーターの 1 つとして、当然ながら非常に重要な役割を果たします。フォントの重要性が長い間十分に注目されていなかったのは残念です。多くの人はフォントの概念が「宋体」、Arial、Helvetica、serif というフォントファミリーの段階で止まっていますが、なぜこの設定になっているのか、この設定が妥当なのかなどを理解していません。さて、フォントの詳細についてお話しましょう。

- font-family

CSS ルールでのフォントの定義は、font-family ルールによって実現されることは誰もが知っています。 CSS ドキュメントを注意深く調べましたが、特定のフォントを指定するルールは見つかりませんでした。

10 年前を思い出してください。次のようなコードがあちこちで見られました:

<font face="Frankin Gothic Book">Lorem font>

Frankin Gothic Book が Windows 専用フォントであると考える人はほとんどいないでしょう。 Mac では Frankin Gothic Book フォントの効果がまったく表示されません。システムはこのフォントを見つけることができないため、Mac のデフォルトのフォントが表示に使用されます。その結果、Web ページのスタイルはオリジナルとはまったく異なり、Frankin Gothic Book の効果はまったく得られません。そこで W3C は、フォント セット という概念を提案しました。これは、一連の類似したフォントが優先順位に従ってリストに形成され、ブラウザはリストの先頭から最初に使用可能なフォントが見つかるまで照合を開始し、そのフォントを表示に使用します。 。

たとえば、上記の例では、次のようなフォント セットを作成できます:

<span style='font-family: "Franklin Gothic Book","Lucida Grande"' >Lorem Ipsumspan>

• ブラウザがこのテキストをどのようにレンダリングするかを見てみましょう:

• 
  

• Windows の場合: ブラウザはリストの最初のフォントから検索を開始します。Frankin Gothic Book はシステム内に存在し、Frankin Gothic Book フォントを使用して表示されます。

• Mac の場合: ブラウザはリストの最初のフォントから検索を開始します。Frankin Gothic Book はシステムに存在しないため、検索は失敗します。次のフォント、Lucida Grande の検索を続けます。 Lucida Grande フォントがシステムに存在するため、検索が終了し、Lucida Grande フォントが表示されます。

つまり、Mac では、このテキストを Frankin Gothic Book に似た Lucida Grande フォントで表示できます。

ただし、Frankin Gothic Book フォントまたは Lucida Grande フォントが搭載されていないコンピューターもあるため、上記のテキストを正しく表示できない場合があります。その結果、開発者はさまざまなシステムに適応するためにこのフォント リストにフォントを継続的に追加する必要があり、このフォント セットは「類似したフォントを整理する」という本来の機能を失います。そこで、フォントセットに「ユニバーサルフォントファミリー」が導入されました。これは、私たちがよく目にするセリフやサンセリフです。これら 2 つと他の一般的なフォント ファミリについては、今後の記事で詳しく紹介します。ここでは簡単に「指定されたフォントが全て無効な場合にブラウザが指定する最終的な代替フォント」と理解して頂けます。

たとえば、上記のサンプル テキストを改善してみましょう:

<span style='font-family: "Franklin Gothic Book","Lucida Grande", sans- serif'>Lorem Ipsumspan>

• ブラウザがこの改善されたテキストをどのようにレンダリングするかを見てみましょう。

• 
  

• Windows の場合: ブラウザはリストの最初のフォントから検索を開始します。Frankin Gothic Book はシステム内に存在し、Frankin Gothic Book フォントを使用して表示されます。

• Mac の場合: ブラウザはリストの最初のフォントから検索を開始します。Frankin Gothic Book はシステムに存在しないため、検索は失敗します。次のフォント、Lucida Grande の検索を続けます。 Lucida Grande フォントがシステムに存在するため、検索が終了し、Lucida Grande フォントが表示されます。

• 一部のシステム: ブラウザはリストの最初のフォントから検索を開始します。Frankin Gothic Book はシステムに存在しないため、検索は失敗します。次のフォントの検索を続けます。Lucida Grande フォントもシステム上に存在しません。次のフォント、ユニバーサル フォント サンセリフの検索を続けます。ブラウザは、デフォルトのサンセリフ フォント「Arial」を使用してこのテキストを表示します。

2点ご注意ください。まず、ユニバーサルフォントファミリーがどのフォントに対応するかはブラウザによって決まります。上の例では、ブラウザーはサンセリフ フォントとして Arial を指定していますが、別のブラウザーがサンセリフ フォントとして Helvetica を指定する可能性は十分にあります。最終的にどのフォントが使用されるかは予測できません。次に、ユニバーサル フォント ファミリは、フォント セット内の他のフォントが無効な場合の単なるドロップイン ソリューションです。したがって、

デザイナーは、可能な限りすべてのシステムをカバーする完全なフォント セットを提供するよう最善を尽くし、ユニバーサル フォント ファミリに依存すべきではありません。

次のような 2 つの書き方は

間違っています:

<スパンstyle="font-family:sans-serif">ロレムスパン>
<スパンstyle="font-family:sans-serif,Arial">ローレム・イプサムスパン>

最初の書き方の間違いは、フォントをまったく指定しないのと同じであり、フォントの選択を依然としてブラウザーに任せていることです。書くことは書かないことと同じです。

2番目の書き方の間違いは順序にあります。ユニバーサル フォント ファミリは、フォント セット内の他のすべてのフォントが無効になっている場合にのみ機能する必要があるためです。したがって、指定したフォントをユニバーサル フォントの後に配置すると、指定したフォントが一致しない場合にユニバーサル フォントが使用されます。したがって、ユニバーサル フォントがフォント セットの最後のフォントであることを確認する必要があります。

さらに、ここで説明することが2つあります。

まず、フォント セット内のどのフォントをブラウザで使用するかというルールは単純そうに見えますが、実際には非常に複雑です。今後の記事で具体的な手順を説明します。

次に、フォントの CSS ルール名は font-family と呼ばれますが、これは本質的にはフォント セットであり、印刷上の意味でのフォント ファミリーではありません。印刷におけるフォント ファミリとは、Lucida ファミリ (Lucida Sans、Lucida Sans Typewriter、Lucida Console、Lucida Grande などを含む) や Arial ファミリ (Arial、Arial Black、Arial Rounded など) など、同じ書体の一連の異なる強度の組み合わせを指します。 MT など))、ただし、明らかに、これらのフォント ファミリはフォント セットとして直接使用するのには適していません。

以上がWebデザインにおけるフォントの応用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。