css フォント スタイル (フォント スタイル) は、Web ページに不可欠なスタイル属性の 1 つであり、フォント スタイルを使用すると Web ページをより美しくすることができるため、フォント スタイル属性はすべてのデザイナーが理解する必要のある知識となっています。
フォント名属性 (font-family) を設定します
この属性設定ページで使用するフォントを選択します: Simsun、Arial、Verdana、Helvetica、sans-serif など、定義。メソッド:
.ziti {font-family: Simsun、Arial、Verdana;}
ここでは 3 つのフォントが連続して定義されています。最初のフォントがユーザー フォント ライブラリにない場合は、2 番目のフォントが使用されます。 . CSS にフォントが設定されていない場合は、ブラウザのデフォルト値が使用されます。
フォントサイズ属性(font-size)を設定します
font-sizeでは、一般的に使用される3つの単位、em、px、ptがあります。 。
これら 3 つの長さの単位について簡単に説明します:
px、相対的な長さの単位。ピクセル。
em、相対的な長さの単位。現在のオブジェクト内のテキストに対する相対的なフォント サイズ。
pt、長さの絶対単位。ポイント。
最も一般的に使用されるのは px です。フォントの設定方法は以下の通りです:
.ziti {font-size:12px;}
フォントスタイル属性(font-style)を設定します
フォントスタイルは、フォントが斜体かどうかを設定します。
標準、斜体、斜体はデフォルト値です。例:
.ziti {font-style:italic;}
フォントの太さ（太さ）属性（font-weight）を設定します
）は2つだけです属性には太字と太字以外の 2 つのタイプしかないため、その値は標準と太字であり、標準がデフォルト値です。例:
.ziti {font-weight:bold;}
フォント変数属性 (font-variant) を設定します
font-variant は英語の文字にのみ適用され、中国語の文字には影響しません。小文字は大文字でありながら小文字として認識され、文字サイズは直接入力した大文字よりも小さく表示されることを定義します。文字。
font-variant には、normal と small-caps の 2 つの値があります。 Normal はデフォルト値で、通常のフォントです。 small-caps は小文字を大文字に変換します。例:
.ziti {font-variant:small-caps;}
フォント属性(font)の包括的な記述方法
fontは、上記を包括的に定義できるフォント属性です5 つの属性 フォント属性を 1 行で定義できるショートカット メソッドです。書き込み順序は、font-style、font-variant、font-weight、font-size、font-family です。例:
.ziti {font:italic Normalbolold 18px arial;}
属性にデフォルト値がある場合は省略でき、システムはそれをデフォルト値として自動的に解析します。
フォントの色(color)
フォントの色はCSSのテキスト属性の内容に属します。フォント属性のように色の前にフォントを追加する必要はなく、色のみを定義できます。
.ziti {font:italicnormalbolold 18px arial;color:red;}
フォントサイズを設定するにはemを使用してください
テキストが調整できない問題を回避するにはInternet Explorer、多くの開発者 または、ピクセルの代わりに em 単位を使用します。
em サイズ単位は W3C によって推奨されています。
1em は現在のフォント サイズと同じです。ブラウザのデフォルトのテキスト サイズは 16 ピクセルです。
つまり、1em のデフォルトのサイズは 16px です。次の式を使用してピクセルを em に変換できます: px/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875 em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
試してみる
上記の例では、em テキスト サイズは前の例のピクセルと同じです。ただし、em 単位を使用すると、すべてのブラウザでテキストのサイズを変更できます。
残念ながら、これは依然として IE の問題です。テキストのサイズを変更すると、通常よりも大きくまたは小さく表示されます。
パーセンテージを使用してフォント サイズを調整することもできます: body {font-size:100%;}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font属性</title>
</head>
<style type="text/css">
p#pmin
{
font:1em Arial;
}
p#pall
{
font:italic small-caps bold 12px/1.2em Arial;
}
p#p2
{
font:italic 18px/1.5em "宋体",Arial,sans-serif;
}
</style>
</head>
<body>
<p id="pmin">font值最小的形式,定义段落的字体为1倍字体大小(font-size属性),Arial字体(font-family属性).</p>
<p id="pall">定义段落的字体为斜体(font-style属性),小型的大写字母(font-variant属性),粗体(font-weight属性),12px字体大小(font-size属性),1.2倍(字体)的行高(line-height属性),Arial字体(font-family属性).</p>
<p id="p2">字体属性演示</p>
</body>
</html>
次のセクション