HTMLでフォントを設定する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-21 10:27:11

オリジナル

16064 人が閲覧しました

HTML は Web 開発において非常に重要なマークアップ言語であり、タグや属性などを通じて Web ページの構造とスタイルを定義できます。その中でもフォントの設定はWebデザインの基本となるので、HTMLでフォントを設定する方法を紹介します。

1. フォントの指定

HTML では、font タグを通じてフォントを指定できます。具体的な構文は次のとおりです。

<font face="字体名称">要设置字体的文本</font>

ログイン後にコピー

このタグでは、face 属性を使用してフォント名を指定し、複数のフォント名はカンマで区切られます。 Web ページが読み込まれると、ユーザーのコンピュータにフォントがインストールされているかどうかに応じて、フォントが順番にレンダリングされます。前のフォントがユーザーのコンピュータに存在しない場合は、見つかるまで後続のフォントが試行されます。

たとえば、次のコードはテキストを「Microsoft Yahei」フォントに設定します:

<font face="微软雅黑">Hello World!</font>

ログイン後にコピー

2. フォントサイズを指定します

HTML では、サイズを渡すことができます。 fontタグのフォントサイズを指定するプロパティ。具体的な構文は次のとおりです。

<font size="n">要设置字体大小的文本</font>

ログイン後にコピー

このうち、n は指定されたフォントサイズの番号で、1 ～ 7 の数字は異なるフォントサイズレベルを表し、1 が最小、7 が最大となります。

たとえば、次のコードはテキストをフォントサイズ 16 に設定します:

<font size="4">Hello World!</font>

ログイン後にコピー

3. 色の設定

HTML では、色を通じて設定できます。フォントタグのフォントカラーの属性。具体的な構文は次のとおりです。

<font color="颜色值">要设置颜色的文本</font>

ログイン後にコピー

このうち、カラー値は、カラー名、RGB カラー値、または 16 進カラー値にすることができます。

たとえば、次のコードはテキストを赤に設定します:

<font color="red">Hello World!</font>

ログイン後にコピー

4. CSS スタイルの使用

フォントタグを使用してフォントを設定することに加えて、次のことができます。 CSS スタイルを使用してフォントを設定することもできます。この方法はより柔軟で正確です。具体的な構文は次のとおりです。

内部スタイルシート:

<style type="text/css">
    选择器 { 
        font-family: 字体名称; 
        font-size: n; 
        color: 颜色值; 
    }
</style>

ログイン後にコピー

外部スタイルシート:

<head>
    <link rel="stylesheet" type="text/css" href="样式表地址">
</head>

ログイン後にコピー

このうち、セレクターは HTML タグ名、クラス名、または ID 名にすることができます。などを使用して、スタイルを適用する要素を選択します。フォント名、フォントサイズ、フォントカラーなどの属性の値はfontタグと同様です。

たとえば、次の CSS スタイルは、p タグのフォントを「Microsoft Yahei」、フォントサイズを 16 ピクセル、色を赤に設定します。

<style type="text/css">
    p { 
        font-family: 微软雅黑;
        font-size: 16px;
        color: red;
    }
</style>

ログイン後にコピー

概要:

上記の導入 HTML でフォントを設定するには、font タグを使用してフォント、フォントサイズ、色などの属性を指定するか、CSS スタイルを使用してより柔軟で洗練された効果を実現することができます。実際の Web デザインでは、ページの要件とユーザーエクスペリエンスに基づいてこれらの方法を合理的に使用する必要があります。

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