CSS 字体

CSSのフォントプロパティは、フォント、太字、サイズ、テキストスタイルを定義します。

serifとsans-serifフォントの違い

コンピュータ画面上では、sans-serifフォントはserifフォントよりも読みやすいと考えられています。

CSS字型

CSSには、2種類のフォントファミリ名があります。

• 通用字体系列- 似た外観を持つフォントの組み合わせ（例: "Serif" や "Monospace"）
• 特定字体系列- 特定のフォントファミリー（例：「Times」や「Courier」）

字体系列

font-family プロパティは、テキストのフォントファミリを設定します。

font-family 属性はいくつかのフォント名を「フォールバック」メカニズムとして設定する必要があります。ブラウザが最初のフォントをサポートしていない場合、次のフォントを試行します。

注意: フォントファミリ名が複数の単語からなる場合は、引用符で囲む必要があります。例: Font Family: "宋体"。

複数のフォントファミリはカンマで区切って指定します：

よく使われるフォントの組み合わせについては、当サイトの...をご覧ください。Web安全字体组合。

字体样式

主にイタリック体のテキストを指定するためのフォントスタイルプロパティです。

この属性には3つの値があります：

• 正常 - テキストを正常に表示します
• 斜体 - 斜体で表示されるテキスト
• 傾斜したテキスト - 文字が片側に傾きます（イタリックに非常に似ていますが、あまりサポートされていません）

字体大小

font-size プロパティは、テキストのサイズを設定します。

文字のサイズを管理できるかどうかは、Webデザインにおいて非常に重要です。ただし、フォントサイズを調整して段落を見出しのように見せたり、見出しを段落のように見せたりすることはできません。

必ず正しいHTMLタグを使用してください。<h1> - <h6>は見出し、<p>は段落を表します：

フォントサイズの値は、絶対サイズまたは相対サイズにできます。

絶対サイズ：

• 指定されたサイズのテキストを設定します
• すべてのブラウザでユーザーがテキストサイズを変更できないようにする
• 出力の物理的なサイズが決まっている場合、絶対サイズは便利です。

相対サイズ：

• 周囲の要素に対してサイズを設定します
• ユーザーがブラウザでテキストサイズを変更できるようにする

フォントサイズを指定しない場合、デフォルトサイズは通常のテキスト段落と同じ16ピクセル（16px=1em）です。

フォントサイズをピクセルで設定する

フォントサイズをピクセルで設定すると、文字サイズを完全に制御できます：

上記の例は、Internet Explorer 9、Firefox、Chrome、Opera、Safariでブラウザのズームを使用してテキストサイズを調整できます。

ブラウザのズームツールでテキストサイズを調整することもできますが、この調整はページ全体に対して行われ、テキストだけに適用されるわけではありません。

emを使用してフォントサイズを設定します

Internet Explorer でテキストサイズを調整できない問題を避けるため、多くの開発者はピクセルの代わりに em 単位を使用しています。

emのサイズ単位はW3Cによって推奨されています。

1em は現在のフォントサイズに等しいです。ブラウザのデフォルトの文字サイズは16pxです。

したがって、1em のデフォルトサイズは16pxです。次の式でピクセルを em に変換できます：px/16=em

上記の例では、em の文字サイズは前の例のピクセルと同じです。ただし、em 単位を使用すると、すべてのブラウザでテキストサイズを調整できます。

残念ながら、依然としてIEブラウザの問題があります。テキストサイズを調整すると、通常のサイズよりも大きくなったり小さくなったりします。

パーセンテージとEMの組み合わせを使用します

すべてのブラウザで機能する解決策としては、<body> 要素のデフォルトのフォントサイズをパーセンテージで設定します：

私たちのコードは非常に効果的です。すべてのブラウザで同じテキストサイズを表示でき、すべてのブラウザでテキストサイズの拡大縮小が可能です。

更多实例

设置字体加粗
この例は、フォントの太字を設定する方法を示しています。

フォントの変化を設定できます
この例では、フォントのバリアントの設定方法を示しています。

単一の宣言内のすべてのフォントプロパティ
この例は、ショートハンドプロパティを使用して、1つの宣言内でフォントプロパティを設定する方法を示しています。

すべてのCSSフォントプロパティ