CSSfont-familyプロパティを使用してWebサイトのテキストを変更する方法

CSSを使用して、Webページでさまざまなスタイルを実現できます。テキストの色を変更したい場合は、そのためのCSSプロパティがあります。また、Webページ上のテキストの位置、またはサイトに表示されるテキストの種類を変更したい場合は、変更できます。

開発者はfont-familyプロパティを使用して、Webサイトのさまざまなフォントタイプを選択します。このチュートリアル記事では、これを使用してWebサイトのテキストを変更することについて知っておく必要があるすべてを学びます。

ウェブサイト上のテキストの目的は何ですか?

テキストは、Webサイトの開発プロセスで重要な役割を果たし、ユーザーに重要な情報を提供します。これは、誤って使用されるまで誰も気付かないことの1つです。新しくてエキサイティングなフォントタイプがすべて利用できるので、開発者はWebサイトテキストの真の目的を忘れがちです。

ユーザーがウェブサイトの情報を読むことができない場合、ユーザーはそのサイトが何であるか、またはその使用方法を知らない可能性があります。したがって、正しいフォントタイプを選択することが重要です。

font-familyプロパティとは何ですか?

Font-familyは、Webサイトでフォントタイプを設定するために使用されるCSSプロパティです。このプロパティには通常、「フォールバックシステム」として設計されたものにいくつかのフォント名を含む値が割り当てられます。 「フォールバックシステム」は、Webサイトと、サイトへの訪問者が使用する可能性のあるさまざまな種類のブラウザとの間の互換性を保証します。

font-familyプロパティに割り当てられた値では、各フォントタイプをコンマで区切る必要があります。フォント名に複数の単語が含まれている場合は、引用符を使用する必要があります。

フォントファミリの構文例


selector{
font-family: firstFontType, 'second font type', genericFontType;
}

上記の例のセレクターは、ID、クラス、またはHTML要素です。通常、セレクターはbody要素であり、特定のWebページ上のすべてのワールドが同じフォントファミリーに属することを保証します。

font-familyプロパティには通常、いくつかのオプションを含むスタック値が割り当てられます。上記の例には3つのオプションがありますが、さらに多くのオプションがあります。フォールバックシステムを利用して、ブラウザは最初のフォントタイプがローカルファイルで使用可能かどうかを確認します。そうでない場合、ブラウザは2番目のフォントタイプが使用可能かどうかを確認します。

上記の例の一般的なフォントタイプは、スタック内の以前のフォントタイプが属するフォントファミリです。したがって、ブラウザが優先フォントタイプのいずれも表示できない場合、ブラウザはローカルファイルから同じフォントファミリのフォントタイプを選択します。

使用できるさまざまなフォントタイプは次のとおりです。

  • セリフ
  • サンセリフ
  • 筆記体
  • ファンタジー
  • モノスペース

動作中のfont-familyプロパティの例

Google ChromeやFirefoxなどの一般的なブラウザは、デフォルトのフォントタイプとしてTimes NewRomanを使用します。ただし、font-familyプロパティを使用して、Webサイトのフォントタイプを指定できます。

font-familyプロパティを使用しないWebページは、ブラウザで次のように生成されます。

上の画像のテキストを変更するには、Webページ上のすべてのテキストを対象とするbody要素を使用する必要があります。

本文テキストでのfont-familyプロパティの使用


body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

上記のコードは、WebページのフォントファミリをFranklin GothicMediumに設定します。そのフォントがブラウザのローカルファイルで使用できない場合は、 ArialNarrowフォントに移動します。スタックの最終的なフォントタイプはArialであり、それも使用できない場合、ブラウザは汎用フォントファミリsans-serifから使用可能なフォントタイプを選択します。

開発者が精通している必要があるWebセーフフォントのリストがあります。これらのフォントタイプは、人気があるため、Webセーフとして分類されます。したがって、ユーザーがWebサイトを表示するブラウザーでは、ローカルファイルにこのフォントタイプが含まれている可能性があります。

ただし、展開するWebサイトファイルにフォントファイルを含める必要がある場合でも、Webサイトであまり人気のないフォントを使用することはできます。

このセクションの冒頭で説明したコードは、ブラウザーで次の出力を生成します。

フランクリンゴシックミディアムとデフォルトのTimesNewRomansフォントタイプの違いは際立っています。これは、フランクリンゴシックミディアムがサンセリフフォントファミリーに属し、タイムズニューローマンセリフファミリーに属しているためです。

あまり一般的ではありませんが、一部のWebサイトでは、1つのWebページに異なるフォントタイプがあります。たとえば、Webページで2つのフォントタイプを使用することが目標である場合、クラスまたはIDセレクターを使用してこれを実現できます。

ブロックフォントタイプの例:IDの使用


#content-1{
font-family:'Courier New', Courier, monospace;
}

グループ内の単一の段落のテキストを変更することが目標である場合(通常、ブロック引用符の場合のように)、IDを使用して特定の段落をターゲットにすることもできます。上記のコードは、IDを使用して、(グループ内の)2番目の段落のフォントタイプをデフォルトのTimes NewRomansフォントタイプからCursiveフォントタイプに変更します。このコードの効果は、下の画像で確認できます。

見出しのフォントタイプの選択例:h1セレクター


h1{
font-family: Arial, Helvetica, sans-serif;
}

上記のコードは、ブラウザで次の出力を生成します。

上記の出力の段落はデフォルトのTimesNew Romansフォントを使用していますが、見出しはArialフォントタイプを使用しています。上記のコードのh1セレクターをpセレクターに置き換えるだけで、その逆を実現できます。この変更により、Webページのすべての段落でArialフォントタイプが使用され、見出しはデフォルトのTimes NewRomansフォントタイプに戻ります。

これで、CSSfont-familyプロパティを使用してWebサイトのテキストを変更できます。

これで、Webサイトのテキストを変更するスキルが身に付きました。また、Webサイトに適したフォントタイプを選択することが重要であることも知っておく必要があります。もう1つの重要なポイントは、知っておくことができるWebセーフフォントのリストがあることです。

この段階で学ぶべきもう1つの優れたCSSプロパティは、text-alignプロパティです。このプロパティを使用すると、Webサイトのさまざまな場所にテキストを配置できます。これは、すべてのフロントエンド開発者にとってもう1つの重要なスキルです。