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>
  • おすすめコース
  • コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!