HTML と CSS を使用してフォント スタイルを変更する方法

Web デザインにおいて、フォントは非常に重要な要素の 1 つです。適切なフォントを選択すると、Web ページの読みやすさと視覚的な効果が向上します。 HTML には多くのフォントの選択肢があり、CSS を通じてフォント スタイルを変更することもできます。この記事では、HTML と CSS を通じてフォント スタイルを変更する方法を説明します。

1. HTML でのフォントの選択

HTML では、選択できるフォントが多数あります。一般的なフォントの例をいくつか示します。

<p style="font-family: Arial, sans-serif;">这里是Arial字体。</p>
<p style="font-family: "Times New Roman", serif;">这里是Times New Roman字体。</p>
<p style="font-family: Verdana, Geneva, sans-serif;">这里是Verdana字体。</p>
<p style="font-family: Impact, Charcoal, sans-serif;">这里是Impact字体。</p>

上の例では、font-family 属性を使用してフォントを指定しました。ここでは、Arial、Times New Roman、Verdana、Impact の 4 つのフォントを指定しており、それぞれ異なるスタイルに対応しています。 CSS ファイルで同じスタイルを定義すると、これらのスタイルは HTML タグで設定されたスタイルをオーバーライドすることに注意してください。

2. CSS でのフォント スタイルの定義

CSS では、font-family プロパティを通じてフォント スタイルを定義できます。例:

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

ここでは、ページ全体のデフォルト フォントを Arial になるように定義します。Arial フォントをロードできない場合は、代わりにサンセリフ フォントが使用されます。

font-family 属性に加えて、他の属性を使用してフォント スタイルを変更することもできます。以下に一般的な属性をいくつか示します。

• font-size: 12px、14px などのフォント サイズを定義します。
• font-style: 標準、斜体、斜体などのフォント スタイルを定義します。
• font-weight: 標準、太字、太字などのフォントの太さを定義します。
• line-height: 行の高さを数値またはパーセンテージで定義します。

これらのプロパティを組み合わせて、さまざまなフォント効果を作成できます。例:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}

ここでは、h1 タイトルのフォントを Arial、フォント サイズを 24px、フォントの太さを太字、行の高さを 1.5 倍と定義します。

3. Web フォントの使用

システムの組み込みフォントの使用に加えて、Web フォントも使用できます。 Webフォントとはブラウザ上で直接利用できるフォント形式で、一般的な形式としてはWOFF、WOFF2、TTF、OTFなどが挙げられます。 Web フォントを使用すると、フォントに多様性と独自性を加えることができます。

Web フォントを使用するには、CSS で @font-face ルールを宣言できます。例:

@font-face {
  font-family: MyWebFont;
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

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

ここでは、まず「MyWebFont」という名前のフォントを宣言し、次に src 属性を通じてフォント ファイルのアドレスを指定します。 font-family プロパティを使用する場合、カンマで区切ることで複数のフォントを使用できます。この例では、ブラウザが Web フォントを読み込めない場合、システム内の Arial フォントが代わりに使用されます。

4. フォントの著作権問題

カスタム フォントを使用する場合は、フォントの著作権問題に注意する必要があります。フォントの著作権により Web 上での使用が許可されていない場合、そのフォントを Web ページで使用することはできません。

Google FontsやDaFontなど、現在使用できる無料のフォントがたくさんあります。これらの Web サイトを通じて、適切なフォントをすぐに見つけて CSS で呼び出すことができます。

5. 概要

フォントは Web デザインにおいて重要な役割を果たします。 HTML と CSS を使用すると、フォントのスタイルと外観を簡単に調整できます。フォントを選択するときは、読みやすさと著作権の問題を考慮する必要があります。 Web フォントを使用すると多様性が高まりますが、フォントの著作権の問題に注意する必要があります。

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