CSS フォントファミリーのプロパティ分析: font-family と font-size

CSS フォント ファミリー属性分析: font-family と font-size

Web デザインでは、フォントの選択とサイズは非常に重要であり、読みやすさに直接影響します。 Web ページの全体的なスタイル。 CSS には豊富なフォント プロパティが用意されており、最もよく使用されるプロパティには font-family と font-size があります。

1. font-family プロパティ

font-family は、フォント名またはフォント ファミリの優先順位を指定するために使用されます。たとえば、次のようにフォントを設定できます:

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

この例では、Arial フォントが最初に試行されます。Arial フォントが使用できない場合は、Helvetica フォントが試行されます。最後に、Helvetica フォントが使用できない場合は、Helvetica フォントが試行されます。フォントが使用できない場合は、デフォルトのサンセリフ フォントを使用します。異なるデバイスでは同じフォントが利用できない可能性があるため、フォント ファミリを設定するこの方法は非常に便利です。

CSS では、次のように font-family で複数のフォント名を含むリストを指定することもできます。

h1 {
  font-family: "Times New Roman", Times, serif;
}

この例では、Times New Roman フォントがユーザーのデバイスで利用できない場合、 Times フォントが試行され、Times フォントが使用できない場合は、デフォルトのセリフ フォントが使用されます。

さらに、サンセリフ、セリフ、等幅、筆記体、ファンタジーなど、さまざまなオペレーティング システムやブラウザーで使用できるユニバーサル フォント ファミリがいくつかあります。

2. font-size 属性

font-size は、フォントのサイズを指定するために使用されます。一般的な単位には、ピクセル (px)、パーセンテージ (%)、および em が含まれます。

h2 {
  font-size: 24px;
}

この例では、h2 要素のフォント サイズは 24 ピクセルに設定されています。

さらに、パーセント単位を使用してフォント サイズを指定することもできます。例:

h3 {
  font-size: 120%;
}

この例では、h3 要素のフォント サイズは、h3 要素のフォント サイズの 120% です。親要素。

最後に、要素自体のフォント サイズを基準にして計算される em 単位を使用してフォント サイズを指定することもできます。例:

p {
  font-size: 1.2em;
}

この例では、p 要素のフォント サイズは親要素のフォント サイズの 1.2 倍です。

概要

Web デザインでは、適切なフォントとサイズを正しく選択することが非常に重要です。フォントの優先順位を font-family 属性で設定して、さまざまなデバイス上で適切な表示効果を確保できます。 font-size プロパティはフォントのサイズを調整するために使用され、ピクセル、パーセント、および em 単位で指定できます。この2つの属性を使い分けることで、Webページ上のフォントをより美しく、読みやすくすることができます。

以上がCSS フォントファミリーのプロパティ分析: font-family と font-sizeの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。