ホームページ > 記事 > ウェブフロントエンド > HTML と CSS を使用してフォント スタイルを変更する方法
Web デザインにおいて、フォントは非常に重要な要素の 1 つです。適切なフォントを選択すると、Web ページの読みやすさと視覚的な効果が向上します。 HTML には多くのフォントの選択肢があり、CSS を通じてフォント スタイルを変更することもできます。この記事では、HTML と CSS を通じてフォント スタイルを変更する方法を説明します。
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 タグで設定されたスタイルをオーバーライドすることに注意してください。
CSS では、font-family プロパティを通じてフォント スタイルを定義できます。例:
body { font-family: Arial, sans-serif; }
ここでは、ページ全体のデフォルト フォントを Arial になるように定義します。Arial フォントをロードできない場合は、代わりにサンセリフ フォントが使用されます。
font-family 属性に加えて、他の属性を使用してフォント スタイルを変更することもできます。以下に一般的な属性をいくつか示します。
これらのプロパティを組み合わせて、さまざまなフォント効果を作成できます。例:
h1 { font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; line-height: 1.5; }
ここでは、h1 タイトルのフォントを Arial、フォント サイズを 24px、フォントの太さを太字、行の高さを 1.5 倍と定義します。
システムの組み込みフォントの使用に加えて、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 フォントが代わりに使用されます。
カスタム フォントを使用する場合は、フォントの著作権問題に注意する必要があります。フォントの著作権により Web 上での使用が許可されていない場合、そのフォントを Web ページで使用することはできません。
Google FontsやDaFontなど、現在使用できる無料のフォントがたくさんあります。これらの Web サイトを通じて、適切なフォントをすぐに見つけて CSS で呼び出すことができます。
フォントは Web デザインにおいて重要な役割を果たします。 HTML と CSS を使用すると、フォントのスタイルと外観を簡単に調整できます。フォントを選択するときは、読みやすさと著作権の問題を考慮する必要があります。 Web フォントを使用すると多様性が高まりますが、フォントの著作権の問題に注意する必要があります。
以上がHTML と CSS を使用してフォント スタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。