CSSフォント
css フォント スタイル (フォント スタイル) は、Web ページに不可欠なスタイル屬性の 1 つであり、フォント スタイルを使用すると Web ページをより美しくすることができるため、フォント スタイル屬性はすべてのデザイナーが理解する必要のある知識となっています。
フォント名屬性 (font-family) を設(shè)定します
この屬性設(shè)定ページで使用するフォントを選択します: Simsun、Arial、Verdana、Helvetica、sans-serif など、定義。メソッド:
.ziti {font-family: Simsun、Arial、Verdana;}
ここでは 3 つのフォントが連続して定義されています。最初のフォントがユーザー フォント ライブラリにない場合は、2 番目のフォントが使用されます。 . CSS にフォントが設(shè)定されていない場合は、ブラウザのデフォルト値が使用されます。
フォントサイズ屬性(font-size)を設(shè)定します
font-sizeでは、一般的に使用される3つの単位、em、px、ptがあります。 。
これら 3 つの長さの単位について簡単に説明します:
px、相対的な長さの単位。ピクセル。
em、相対的な長さの単位?，F(xiàn)在のオブジェクト內(nèi)のテキストに対する相対的なフォント サイズ。
pt、長さの絶対単位。ポイント。
最も一般的に使用されるのは px です。フォントの設(shè)定方法は以下の通りです:
.ziti {font-size:12px;}
フォントスタイル屬性(font-style)を設(shè)定します
フォントスタイルは、フォントが斜體かどうかを設(shè)定します。
標準、斜體、斜體はデフォルト値です。例:
.ziti {font-style:italic;}
フォントの太さ（太さ）屬性（font-weight）を設(shè)定します
）は2つだけです屬性には太字と太字以外の 2 つのタイプしかないため、その値は標準と太字であり、標準がデフォルト値です。例:
.ziti {font-weight:bold;}
フォント変數(shù)屬性 (font-variant) を設(shè)定します
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のテキスト屬性の內(nèi)容に屬します。フォント屬性のように色の前にフォントを追加する必要はなく、色のみを定義できます。
.ziti {font:italicnormalbolold 18px arial;color:red;}
フォントサイズを設(shè)定するにはemを使用してください
テキストが調(diào)整できない問題を回避するにはInternet Explorer、多くの開発者 または、ピクセルの代わりに em 単位を使用します。
em サイズ単位は W3C によって推奨されています。
1em は現(xiàn)在のフォント サイズと同じです。ブラウザのデフォルトのテキスト サイズは 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 の問題です。テキストのサイズを変更すると、通常よりも大きくまたは小さく表示されます。
パーセンテージを使用してフォント サイズを調(diào)整することもできます: 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>
