CSSフォント

CSS フォント

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

CSS フォント

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

ユニバーサルフォントファミリ - 外観が似ているフォントシステムの組み合わせ (「Serif」や「Monospace」など)

特定のフォントファミリ -特定のフォントファミリ (「Times」や「Courier」など)

Font-family

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

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

注: フォントファミリの名前が複数の文字である場合は、Font Family: "宋体" のように引用符で囲む必要があります。

Font style

は主に斜体テキストのフォントスタイル属性を指定するために使用されます。

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

Normal - テキストを通常どおり表示します

Italic - テキストを斜体で表示します

斜体テキスト - テキストは片側に傾いています (斜体と非常によく似ていますが、サポートはあまりありません)

フォントサイズ

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

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

必ず正しい HTML タグを使用してください。つまり、見出しには <h1>、段落には <p> を使用してください。

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

絶対サイズ:

テキストを指定されたサイズに設定します

ユーザーはすべてのブラウザでテキストサイズを変更できません

絶対サイズは、出力の物理サイズを決定するときに役立ちます

相対サイズ:

周囲との相対サイズサイズを設定する要素

ユーザーがブラウザでテキストサイズを変更できるようにします

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

フォントサイズをピクセル単位で設定します

テキストサイズをピクセル単位で設定すると、テキストサイズを完全に制御できます:

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

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

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

1em は現在のフォントサイズと同じです。ブラウザのデフォルトのテキストサイズは 16 ピクセルです。

つまり、1em のデフォルトのサイズは 16px です。次の式でピクセルを em に変換できます: px/16=em

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

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

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{font-family:"微软雅黑"} p.text1{font-style:italic;} p.text2{font-size:40px;} p.text3{font-size:1.875em;} /* 30px/16=1.875em */ p.text4{font-size:0.875em;} </style> </head> <body> <h1>《七步诗》曹植</h1> <p class="text1">煮豆持做羹,</p> <p class="text2">漉豉以为汁,</p> <p class="text3">萁在釜下燃,</p> <p class="text4">豆在釜中泣,</p> <p class="text5">本自同根生,</p> <p class="text6">相煎何太急?</p> </body> </html>

提出するリセットコード

自動運転