CSSフォント
CSS フォント
CSS フォントのプロパティは、フォント、太字、サイズ、テキスト スタイルを定義します。
コンピューター畫面では、サンセリフ フォントはセリフ フォントよりも読みやすいと考えられています
CSS フォント
CSS では、2 種類のフォント ファミリ名があります:
Genエリックフォントファミリー - 外観が似ているフォントシステムの組み合わせ (「Serif」や「Monospace」など) 特定のフォントファミリー - 特定のフォントファミリー (「Times」や「Courier」など)| フォントファミリー | 説明 | |
|---|---|---|
| Times New Roman Georgia | Serifフォントの文字には行末に追加の裝飾があります||
| Arial Verdanaan の「sans」はいいえを意味します - これらのフォントには末尾に追加の裝飾がありません | ||
| courier New | Lucida Console 同等の文字はすべて同じ幅です |
フォントファミリー
font-family プロパティは、テキストのフォントファミリーを設(shè)定します。
font-family 屬性は、「フォールバック」メカニズムとしていくつかのフォント名を設(shè)定する必要があります。ブラウザが最初のフォントをサポートしていない場合は、次のフォントを試します。
注: フォント ファミリの名前が複數(shù)の文字である場合は、Font Family: "宋體" のように引用符で囲む必要があります。
複數(shù)のフォント ファミリはカンマで區(qū)切って指定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">這一段的字體是 Times New Roman </p>
<p class="sansserif">這一段的字體是 Arial.</p>
</body>
</html>プログラムを?qū)g行して試してみましょう
フォント スタイル
は主に斜體テキストのフォント スタイル屬性を指定するために使用されます。
このプロパティには 3 つの値があります:
Normal - テキストを通常どおり表示します
Italic - テキストを斜體で表示します
Slanted text - テキストは橫に傾いています (斜體と非常によく似ていますが、サポートが少ない)
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>
<body>
<p class="normal">這是一段正常的字體 - </p>
<p class="italic">這是一段正常斜體字傾斜的文字 </p>
<p class="oblique">文字向一邊傾斜（和斜體非常類似，但不太支持）</p>
</body>
</html>プログラムを?qū)g行して試してください
フォントサイズ
font-size プロパティはテキストのサイズを設(shè)定します。
テキストのサイズを管理する機(jī)能は、Web デザインにおいて非常に重要です。ただし、フォント サイズを調(diào)整して段落を見出しのように見せたり、見出しを段落のように見せたりすることはできません。
必ず正しい HTML タグを使用してください。見出しには <h1>、段落には <p> を使用してください。
フォント サイズの値は絶対サイズまたは相対サイズにすることができます。絶対サイズ:
テキストを指定されたサイズに設(shè)定します
すべてのブラウザでテキストのサイズを変更することを許可しません
の物理的なサイズを決定します。出力絶対サイズは便利です
相対サイズ:
周囲の要素に対する相対的なサイズを設(shè)定します
ユーザーがブラウザでテキストのサイズを変更できるようにします
注意: ない場合はフォント サイズを指定すると、デフォルト サイズは通常のテキスト段落と同じ 16 ピクセル (16px=1em) になります。
フォントサイズをピクセル?yún)g位で設(shè)定します
テキストサイズをピクセル?yún)g位で設(shè)定し、テキストサイズを完全に制御できます:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in px allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text.</p>
<p><b>注意:</b>這個(gè)例子在 IE9之前的版本不工作, prior version 9.</p>
</body>
</html>プログラムを?qū)g行して試してください
em を使用してフォント サイズを設(shè)定します
Internet Explorer でテキストのサイズを変更できない問題を回避するために、多くの開発者はピクセルの代わりに em 単位を使用しています。
em サイズ単位は W3C によって推奨されています。
1em は現(xiàn)在のフォント サイズと同じです。ブラウザのデフォルトのテキスト サイズは 16 ピクセルです。
つまり、1em のデフォルトのサイズは 16px です。次の式を使用してピクセルを em に変換できます: px/16=em 同じピクセル。ただし、em 単位を使用すると、すべてのブラウザでテキストのサイズを変更できます。
殘念ながら、IE には依然として問題があります。テキストのサイズを変更すると、通常よりも大きくまたは小さく表示されます。
パーセンテージとEMの組み合わせを使用します
すべてのブラウザで、要素のデフォルトのフォントサイズを設(shè)定する解決策はパーセンテージです:
例
りープログラムを?qū)g行して試してください
インスタンス
フォントを太字に設(shè)定してください
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in em allows all major browsers to resize the text.
Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.
</p>
</body>
</html>プログラムを?qū)g行して試してください
CSSフォントプロパティ
プロパティ 説明 font 1つのステートメントですべてのフォントを設(shè)定しますプロパティ フォントファミリー を指定しますテキストのフォントファミリー font-size テキストのフォントサイズを指定します font-style テキストのフォントスタイルを指定します font-variant 小さい大文字で表示しますまたは通常のフォントテキスト。 font-weight フォントの太さを指定します。
