CSS ??

CSS Font

CSS ?? ??? ??, ??, ??, ??? ???? ?????.

??? ????? ???? ??? ??? ???? ?? ?? ??? ?????.

CSS ??

CSS?? ? ?? ??? ?? ?? ??? ????.

?? ?? ?? - ??? ??? ?? ?? ???? ??(?: "Serif" ?? "Monospace")

?? ?? ?? - ?? ?? ??(?: "Times" ?? "Courier")

Verdanaan "sans"? ???? ?????. ? ???? ?? ?? ??? ????.

Font Family

font-family ??? ???? ?? ??? ?????.

font-family ??? "??" ?????? ?? ?? ??? ???? ??, ????? ? ?? ??? ???? ??? ?? ??? ???? ???.

??: ?? ?? ??? ? ?? ??? ?? ?? ??: "宋體"? ?? ???? ??? ???.

?? ?? ??? ??? ???? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(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>

????? ???? ??? ???

Font style

? ?? ???? ???? ?? ??? ??? ???? ? ?????.

? ???? ? ?? ?? ????.

Normal - ???? ????? ??
Italic - ???? ????? ??
Slanted text - ???? ??? ????(????? ?? ????? ??? ??)

Instance

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文網(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>

????? ???? ??? ???

Font size

font-size ??? ???? ??? ?????.

??? ??? ???? ??? ? ????? ?? ?????. ??? ??? ???? ???? ?? ??? ????? ??? ???? ???? ??? ?? ????.

???? <h1> - <h6>, ???? <p>? ?????.

?? ?? ?? ?? ?? ?? ?? ??? ? ????.

?? ??:

???? ??? ??? ?????.
???? ?? ?????? ??? ??? ??? ? ????.
??? ??? ?????. ?? ?? ??? ?????

?? ??:

?? ??? ???? ?? ??
???? ?????? ??? ??? ??? ? ??

?? : ??? ?? ?? ?? ??? ???? ?? ??? ?? ??? ??? ???? 16??(16px=1em)???.

?? ??? ?? ??? ??

??? ??? ??? ???? ??? ??? ??? ??? ? ????.

     <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(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>這個例子在 IE9之前的版本不工作, prior version 9.</p>

</body>
</html>

????? ???? ??? ???

em? ???? ?? ?? ??

Internet Explorer?? ??? ??? ??? ? ?? ??? ??? ?? ?? ???? ?? ?? em ??? ?????.

em ?? ??? W3C?? ?????.

1em? ?? ?? ??? ????. ????? ?? ??? ??? 16px???.

??? 1em? ?? ??? 16px???. ?? ??? ???? ??? em?? ??? ? ????. px/16=em ??? ?????. ??? em ??? ???? ?? ?????? ??? ??? ??? ? ????.

????? ??? IE? ?????. ??? ??? ???? ???? ???? ??? ?? ?????.

???? EM ?? ??

?? ?????? ??? ?? ?? ??? ???? ???? ??? ????.

?? ????? ???? ??? ???

Instance

??? ?? ??

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(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>

????? ???? ??? ???

CSS ?? ??

?? family	Font Family	Description
Serif	Times New Roman Georgia	Serif ??? ??? ? ?? ?? ??? ????
Sans- serif	Arial

Property	Description
font	?? ?? ??
font-family	?? ???? ?? ??
font-size	???? ?? ?? ??
font-style	???? ?? ??? ??
font-variant	?? ???? ?? ?? ?? ?? ???.
font-weight	??? ??? ?????.

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(php.cn)</title> <style> p.normal {font-weight:normal;} p.light {font-weight:lighter;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} </style> </head> <body> <p class="normal">段落1</p> <p class="light">段落2</p> <p class="thick">段落3</p> <p class="thicker">段落4</p> </body> </html>

?????? ???

????