- font-family: フォントを設定します。
- font-style: 斜体、斜体などのフォント スタイルを設定します。
- font-weight: フォントの太さを設定します。
- font-size: フォント サイズを設定します。
- font-variant: 小文字を小文字に変換します。
- font-stretch: フォントの伸縮と変形 (あまり使用されておらず、主流のブラウザーではサポートされていません)。
- font: フォント プロパティの略で、1 つのステートメントで複数のフォント プロパティを設定できます。
1.フォントファミリー
font-family 属性は、要素内のテキストのフォントを設定するために使用されます。何千種類ものフォントがあり、中には無料ではないものもあるため、すべてのフォントをコンピューターにインストールすることはほぼ不可能です。設定したフォントが正常に表示されるようにするために、 font-family 属性を使用して複数のフォント名のリストを定義できます. フォント名はカンマで区切られます,ブラウザは最初にリストの最初のフォントを試します. 、サポートされていない場合は、次のものを試してください。
font-family 属性の可能な値は次のとおりです。
| 価値 | 説明 |
|---|---|
| family-name、 generic-family |
ファミリ名: フォント名。フォント名はフォントを表します。たとえば、「Microsoft Yahei」はフォントです。 generic-family: フォント ファミリー、つまり、特定のタイプのフォントの組み合わせです。フォント ファミリーは、多くの類似しているが異なるフォントを含むフォントのタイプを表します。たとえば、「sans-serif」はサン セリフ フォントです。似たフォント。 フォントのデフォルト値はブラウザの設定に依存します |
| inherit | 親要素からフォント設定を継承する |
次の表に、一般的に使用されるフォント ファミリ (ジェネリック ファミリ) をいくつか示します。
| フォントファミリー | 例証する | フォント |
|---|---|---|
| serif | セリフ フォントがあります。つまり、テキスト ストロークの最後に特別な装飾線またはセリフが追加されます。 | 「Lucida Bright」、「Lucida Fax」、Palatino、「Palatino Linotype」、Palladio、「URW Palladio」、serif |
| sans-serif | テキストストロークの最後が滑らかなサンセリフフォント | “Open Sans”、”Fira Sans”、”Lucida Sans”、”Lucida Sans Unicode”、”Trebuchet MS”、”Liberation Sans”、”Nimbus Sans L”、sans-serif |
| monospace | 等幅フォント、つまり各テキストの幅が同じ | 「Fira Mono」、「DejaVu Sans Mono」、Menlo、Consolas、「Liberation Mono」、Monaco、「Lucida Console」、monospace |
| cursive | 筆記体フォント。このフォントには、連続したストロークまたは特殊なイタリック効果があり、手書きの感覚を与えます。 | 「Brush Script MT」、「Brush Script Std」、「Lucida Calligraphy」、「Lucida Handwriting」、「Apple Chancery」、cursive |
| fantasy | 特別な芸術的効果を持つフォント | Papyrus、Herculanum、「Party LET」、「Curlz MT」、Harrington, fantasy |
[例] font-family 属性を使用して、HTML 要素のフォント スタイルを設定します。
<!DOCTYPE html>
<html>
<head>
<title>CSSフォント</title>
<style>
body {
font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
}
</style>
</head>
<body>
<h1>font-family属性</h1>
</body>
</html> 実行結果は次の図のとおりです。
注: フォント ファミリまたはフォント名にスペースまたは複数の単語が含まれる場合、要素の style 属性で必要な場合は、”Times New Roman”、”Courier New”、”Segoe UI” などのように引用符で囲む必要があります。一重引用符を使用します。
Web デザインで最も一般的に使用されるフォント ファミリーは、読みやすいため、セリフとサンセリフです。一部のプログラム コードを表示する場合、通常は等幅フォントが使用されるため、プログラム コードをよりきれいに表示できます。
2.フォントスタイル
font-style 属性は、イタリック、イタリックなどのフォント スタイルを設定するために使用されます。この属性のオプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| normal | デフォルトでは、テキストは通常のフォントで表示されます |
| italic | 斜体のテキスト |
| oblique | 斜体のテキスト |
| inherit | 親要素からフォント スタイルを継承する |
[例] font-style 属性を使用して、フォントのスタイルを設定します。
<!DOCTYPE html>
<html>
<head>
<title>CSSフォント</title>
<style>
body {
font-style: oblique;
}
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
.inherit {
font-style: inherit;
}
</style>
</head>
<body>
<p class="normal">normal：標準フォントを表示する</p>
<p class="italic">italic：イタリック体のフォントを表示する</p>
<p class="oblique">oblique：斜めになったフォントを表示する</p>
<p class="inherit">inherit：親要素からフォントスタイルを継承する</p>
</body>
</html> 実行結果は次の図のとおりです。
一見すると、斜体と斜体は同じ効果があると思うかもしれません。実際、斜体はフォントの斜体バージョンを表示しますが、斜体は傾斜のある通常のフォントです。
3.フォントの太さ
font-weight 属性はフォントの太さを設定でき、オプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| normal | デフォルト、標準フォント |
| bold | 太字フォント |
| bolder | より太字のフォント |
| lighter | 薄いフォント |
| 100、200、300、400、500、600、700、800、900 | フォントの太さを細いものから太いものに設定します。100 は最も細いフォント、400 は通常のフォント、700 は太字に等しくなります。 |
| inherit | 親要素からフォントの太さを継承 |
[例] font-weight 属性を使用して、フォントの太さを設定します。
<!DOCTYPE html>
<html>
<head>
<title>CSSフォント</title>
<style>
p.weight-100 {
font-weight: 100;
}
p.weight-200 {
font-weight: 200;
}
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<p class="weight-100">font-weight: 100;</p>
<p class="weight-200">font-weight: 200;</p>
<p class="normal">font-weight: normal;</p>
<p class="bold">font-weight: bold;</p>
<p class="bolder">font-weight: bolder;</p>
</body>
</html> 実行結果は次の図のとおりです。
4.フォントサイズ
font-size 属性は、フォントのサイズ (フォント サイズ) を設定するために使用され、オプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| xx-small、x-small、small、medium、large、x-large、xx-large | xx-small から xx-large まで、キーワードの形式でフォントをさまざまなサイズに設定します。デフォルト値は中です。 |
| smaller | 親要素より小さいフォント サイズを設定する |
| larger | 親要素よりも大きいフォント サイズを設定する |
| length | 18px、2em など、値と単位の形式でフォントを固定サイズに設定します。 |
| % | 親要素のフォントに対する相対的なフォント サイズをパーセンテージで設定します。 |
| inherit | 親要素からフォントサイズを継承 |
[例] font-size 属性を使用して、フォントのサイズを設定します。
<!DOCTYPE html>
<html>
<head>
<title>CSSのフォント</title>
<style>
.xx_small {
font-size: xx-small;
}
.x_small {
font-size: x-small;
}
.small {
font-size: x-small;
}
.medium {
font-size: x-small;
}
.large {
font-size: large;
}
.x-large {
font-size: x-large;
}
.xx-large {
font-size: xx-large;
}
.smaller {
font-size: smaller;
}
.larger {
font-size: larger;
}
.font-20 {
font-size: 20px;
}
</style>
</head>
<body>
<p class="xx_small">フォントサイズ : xx-small</p>
<p class="x_small">フォントサイズ : x-small</p>
<p class="small">フォントサイズ : x-small</p>
<p class="medium">フォントサイズ : medium</p>
<p class="large">フォントサイズ : large</p>
<p class="x-large">フォントサイズ : x-large</p>
<p class="xx-large">フォントサイズ : xx-large</p>
<p class="smaller">フォントサイズ :smaller</p>
<p class="larger">フォントサイズ :larger</p>
<p class="font-20">フォントサイズ :20ピクセル</p>
</body>
</html> 実行結果は次の図のとおりです。
5.フォントバリアント
font-variant 属性は、テキスト内の小文字の英字をスモール キャップスに変換できます (変換された大文字は元の小文字と同じサイズになるため、スモール キャップスと呼ばれます)。 font-variant 属性のオプションの値は次のとおりです。
| 価値 | 説明 |
|---|---|
| small | デフォルトでは、ブラウザは標準フォントを表示します |
| small-caps | テキスト内の小文字の英字をスモール キャップスに変換する |
| inherit | 親要素から font-variant 属性の値を継承する |
[例] font-variant 属性を使用してスモール キャップスを設定する:
<!DOCTYPE html>
<html>
<head>
<title>CSSフォント</title>
<style>
.normal {
font-variant: normal
}
.small {
font-variant: small-caps
}
</style>
</head>
<body>
<p class="normal">これは段落です</p>
<p class="small">これは段落です</p>
</body>
</html> 実行結果は次の図のとおりです。
font 属性の機能は、前述の background 属性の機能と似ています. font 属性を使用すると、複数の font 属性を同時に設定できます. 違いは、 font 属性の使用は次の順序に従う必要があることです:
font: [[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | キャプション | アイコン | メニュー | メッセージボックス | 小-キャプション | ステータスバー
font 属性を使用する場合、次の点に注意してください。
- font 属性は上記の順序で使用する必要があり、font-size および font-family 属性は無視できません。
- font-size 属性と font-family 属性を除いて、font 属性の各パラメーターに許可される値は 1 つだけです。無視された属性は、それぞれのデフォルト値に設定されます。
- line-height プロパティを定義するには、font-size プロパティと line-height プロパティをスラッシュ
/で区切る必要があります。
[例] font 属性を使用して、複数のフォント効果を同時に定義する:
<!DOCTYPE html>
<html>
<head>
<title>CSSフォント</title>
<style>
p.info {
font: italic bold 12px/30px arial, sans-serif;
}
</style>
</head>
<body>
<p>font属性の使用には、以下の順序に従う必要があります：</p>
<p class="info">font：[[font-style || font-variant || font-weight || font-stretch]? font-size [ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar</p>
</body>
</html> 実行結果は次の図のとおりです。
![2021 年に Raspberry Pi Web サーバーをセットアップする方法 [ガイド]](https://i0.wp.com/pcmanabu.com/wp-content/uploads/2019/10/web-server-02-309x198.png?w=1200&resize=1200,0&ssl=1)
