ホームページ > 記事 > ウェブフロントエンド > CSS文字体_html/css_WEB-ITnose
CSS文字体_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:56:041460ブラウズ
CSS フォント
ナビゲーション1、フォントタイプ
2、フォントサイズ
3、フォントスタイル
4、フォントの太さ
1、フォントファミリー
font-familyプロパティは、のフォントテキストシリーズ。
font-family 属性は、「フォールバック」メカニズムとしていくつかのフォント名を設定する必要があります。ブラウザが最初のフォントをサポートしていない場合は、次のフォントを試します。
注: フォント ファミリの名前が複数の文字である場合は、Font Family: "宋体" のように引用符で囲む必要があります。
複数のフォント ファミリは、カンマで区切って指定します。
例
p{font-family: "Times New Roman", Times, serif;}
2. フォント サイズ
font-size 属性は、文字サイズ。
テキストのサイズを管理する機能は、Web デザインにおいて非常に重要です。ただし、フォント サイズを調整して段落を見出しのように見せたり、見出しを段落のように見せたりすることはできません。
必ず正しい HTML タグを使用してください。つまり、見出しには 4a249f0d628e2318394fd9b75b4636b1、段落には e388a4556c0f65e1904146cc1a846bee を使用してください。
フォント サイズの値は絶対サイズまたは相対サイズにすることができます。
絶対サイズ:
テキストを指定されたサイズに設定します
ユーザーがすべてのブラウザーでテキスト サイズを変更することを許可しません
絶対サイズは、出力の物理サイズが決定されている場合に役立ちます
相対サイズ:
周囲との相対サイズ要素 サイズの設定
ユーザーがブラウザでテキスト サイズを変更できるようにします
備考 フォント サイズを指定しない場合、デフォルト サイズは通常のテキスト段落と同じ 16 ピクセル (16px=1em) です。
3. フォントスタイル font-style
は主に斜体テキストのフォントスタイル属性を指定するために使用されます。
この属性には 3 つの値があります:
Normal - テキストを通常どおり表示します
Italic - テキストを斜体で表示します
Italic テキスト - テキストは片側に傾いています (斜体に非常に似ていますが、サポートはそれほど高くありません)
4. フォントの太さのフォント-weightは主にフォントのフォントのウェイトを指定するために使用されます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="keywords" content="CSS字体"/><meta name="description" content="CSS字体"/><meta name="author" content="xiaobei qq:2801616735"/><title>CSS字体</title></head><body> <h1 style="text-align:center">CSS字体</h1> <ul> <li>1、字体类型</li> <li>2、字体大小</li> <li>3、字体样式</li> <li>4、字体粗细</li> </ul> <h2>1、字体类型-font-family</h2> <p style="border:1px red dashed; font-family:'Arial Unicode MS', serif, '华文行楷';">字体类型</p> <hr/> <h2>2、字体大小-font-size_采用像素</h2> <p style="border:1px red dashed; font-size:10px;">设置字体大小像素</p> <p style="border:1px red dashed; font-size:18px;">设置字体大小像素</p> <p style="border:1px red dashed; font-size:24px;">设置字体大小像素</p> <p style="border:1px red dashed; font-size:36px;">设置字体大小像素</p> <hr/> <h2>2、字体大小_采用em来设置字体大小</h2> <p style="border:1px red dashed; font-size:1em;">采用em来设置字体大小</p> <p style="border:1px red dashed; font-size:2em;">采用em来设置字体大小</p> <p style="border:1px red dashed; font-size:3em;">采用em来设置字体大小</p> <hr/> <h2>3、字体样式-font-style</h2> <p style="border:1px red dashed; font-size:1em; font-style:normal;">normal-默认值。浏览器显示一个标准的字体样式。</p> <p style="border:1px red dashed; font-size:1em; font-style:italic;">italic-浏览器会显示一个斜体的字体样式。</p> <p style="border:1px red dashed; font-size:1em; font-style:oblique;">oblique-浏览器会显示一个倾斜的字体样式。</p> <hr/> <h2>4、字体粗细-font-weight</h2> <p style="border:1px red dashed; font-weight:bold;">字体粗细</p> <p style="border:1px red dashed; font-weight:200;">字体粗细</p></body></html>