CSS ??
CSS ?? ???(Font Style)? ? ???? ???? ?? ??? ?? ? ?????. ?? ???? ???? ? ???? ?? ????? ? ???? ?? ??? ??? ?? ???? ??? ?? ??? ?????.
?? ?? ?? ??(font-family)
? ?? ?? ????? ??? ??? ?????. Simsun , Arial, Verdana, Helvetica, sans-serif ?, ?? ??:
.ziti {font-family: Simsun,Arial,Verdana;}
3?? ?? ?? ????? ??? ??? ? ?? ??? ??? ? ?? ??? ????, CSS? ??? ??? ??? ????? ???? ?????.
?? ?? ?? ??(font-size)
font-size? ???? ?? ??? ??? ? ????. ????? ???? ??? em, px, pt???.
? ?? ?? ??? ?? ??? ??:
px, ?? ?? ??. ??.
em, ?? ?? ?????. ?? ?? ?? ???? ???? ? ?? ?????.
pt, ?? ?? ??. ????.
?? ????? ???? ?? px???. ?? ?? ??? ??? ????.
.ziti {font-size:12px;}
?? ??? ?? ??(font-style)
?? ???? ??? ?????? ??? ???? ???? ? 3?? ?? ????.
normal, italic, oblique ? Normal? ?????, italic ? oblique? ????? ?????. ?:
.ziti {font-style:italic;}
?? ??(thickness) ?? ??(font-weight)
??? ??(thickness) ??? 2?????. , ???? ?? ??? ?? ?? ?? ? ?? ??? ?? ?????. ? ?? ??? ?? ????, ???? ?????. ?:
.ziti {font-weight:bold;}
?? ?? ?? ??(font-variant)
font-variant? ????? ???? ???? ??? ?? ????. ???? ???? ??? ?????. ???? ?????? ??? ??? ???? ????? ?? ??? ????? ????. ??.
Font-variant?? ?? ???? ?? ???? ? ?? ?? ????. Normal? ?????, ?? ?????. small-caps? ???? ???? ?????. ?:
.ziti {font-variant:small-caps;}
?? ??(??)
??? ?? 5?? ??? ?? ???? ????? ??? ? ?? ?? ????, ?? ??? ? ?? ??? ? ??. ?? ??? ?? ?? -??? ??-?? ??-?? ??-?? ??-????. ?:
.ziti {font:italic Normal Bold 18px arial;}
??? ???? ?? ?? ?? ??? ??? ? ??? ???? ?? ???? ????? ?? ?????.
?? ??(color)
?? ??? CSS ??? ??? ??? ???, ???? ????. ??? ?? ?? ?? ??? ???? ?? ??? ??? ? ????.
.ziti {??: ???? ?? ?? 18px arial;??:???;}
ems? ???? ?? ?? ??
Internet Explorer?? ??? ??? ??? ? ?? ??? ??? ?? ?? ???? ?? ?? em ??? ?????.
W3C??? em ?? ??? ?????.
1em? ?? ?? ??? ????. ????? ?? ??? ??? 16px???.
??? 1em? ?? ??? 16px???. ?? ??? ???? ??? em?? ??? ? ????: px/16=em
?
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 */
? ???
? ??? 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>
