CSSフォントでフォントを設定する方法

CSS は Web デザインに使用されるスタイル シート言語で、開発者はフォント設定を含む Web ページのスタイルとレイアウトをより簡単に制御できます。この記事では、美しく、読みやすく、多様な Web デザインを作成するために役立つ CSS フォントの設定方法を説明します。

1. フォント設定の基礎知識

CSS では、フォントは通常、フォント ファミリー、フォントの太さ、斜体、フォント サイズの 4 つの属性値によって定義されます。これらは、それぞれ、font-family、font-weight、font-style、および font-size の 4 つの CSS プロパティに対応します。

1. フォント ファミリー (font-family)

フォント ファミリーはフォントのコレクションを指し、フォント シリーズとも呼ばれます。 Web ページ内のテキストには、Web サイトにインストールされているフォント、またはユーザーのコンピュータにインストールされているフォントを使用できます。

CSS では、1 つ以上のフォント ファミリを指定して、Web ページ上のテキストのスタイルを設定できます。例:

body {
  font-family: Arial, sans-serif;
}

上記のスタイルは、テキスト コンテンツのフォント ファミリが、汎用の西欧サンセリフ フォントである Arial に設定されていることを示します。 Arial フォントがユーザーのコンピュータにインストールされていない場合、システムは代わりに、Helvetica や Verdana などの一般的なサンセリフ フォント ファミリであるサンセリフ フォントを探します。

2. Font-weight

Font-weight はフォントの太さを定義します。 CSSでは、フォントの太さを「normal」（デフォルト）、「bold」（太字）、または数値で指定することができます。例:

h1 {
  font-weight: 700;
}

上記のスタイルは、見出し h1 のフォントの太さを「700」に設定します。これは、フォントが太くなることを意味します。

3. Italic (font-style)

Italic は、フォントが斜体であるかどうかを定義します。 CSSでは斜体を「normal」（デフォルト）、「italic」（斜体）、「oblique」（斜体）で設定できます。例:

em {
  font-style: italic;
}

上記のスタイルは、テキスト内の em タグを斜体スタイルで表示します。

4. フォントサイズ

フォント サイズとは、テキストのサイズを指します。 CSS では、フォント サイズは、ピクセル (px)、パーセント (%)、em または rem (ルート要素の相対サイズに基づく) などの単位を使用して指定できます。例:

p {
  font-size: 16px;
}

上記のスタイルは、テキストのフォント サイズを 16 ピクセル (px) に設定します。

2. その他のフォント設定

フォント ファミリー、フォントの太さ、斜体、フォント サイズに加えて、CSS にはより詳細な制御のための他のフォント設定も用意されています。

1. フォント スタイル (font-style)

CSS は font-style 属性を提供します。これは、フォントが斜体かどうか、標準かどうか、および斜体かどうかをそれぞれ定義できます。イタリック体です。例:

font-style: italic normal oblique;

2. フォント バリアント (font-variant)

font-variant 属性は、「スモールキャップ」などのフォントのバリエーションを制御するために使用されます。そして「普通」など。例:

font-variant: small-caps;

3. Text-transform

text-transform 属性は、「大文字」や「小文字」などのテキストの変換スタイルを制御するために使用されます。 (小文字)など。例:

text-transform: uppercase;

4. Line-height

line-height プロパティは、テキスト行の高さを制御するために使用されます。例:

line-height: 1.5;

5. Letter-spacing

letter-spacing プロパティは、文字間の間隔を増減できます。例:

letter-spacing: 2px;

3. カスタム フォント

CSS では、コンピューターに既にインストールされているフォントを使用できるだけでなく、カスタム フォントを使用して Web ページにさらに個性を加えることができます。 . そして多様性。カスタムフォントの使い方を紹介します。

1. @font-face の使用

@font-face ルールを使用すると、カスタム フォントを使用できます。フォント ファイルを CSS にロードして Web ページで使用できます。

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.ttf");
}

上記の CSS コードは、パス「/fonts/myfont.ttf」の MyFont フォントを読み込みます。 Web ページ上のテキストを正しく表示するには、ユーザーがフォント ファイルをダウンロードする必要があります。

2. フォント ファミリーの指定

@font-face ルールを作成するときは、フォント ファミリーの名前を指定する必要があります。この名前を使用して、Web ページ上のテキストのスタイルを設定できます。例:

h1 {
  font-family: "MyFont", sans-serif;
}

上記のスタイルは、ユーザーが MyFont をインストールしていない場合、サンセリフ フォント ファミリを使用して、テキストのフォントを MyFont に設定します。

4. 概要

CSS フォントは Web デザインの重要な側面であり、Web 開発者が Web ページの外観とプレゼンテーションを制御するのに役立ちます。フォント ファミリー、フォントの太さ、斜体、フォント サイズなどのプロパティに加え、カスタム フォントやその他の CSS プロパティを使用することで、カラフルな Web デザインを作成し、ユーザーにより良い読書体験を提供できます。

以上がCSSフォントでフォントを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。