DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 3.2 字體類型font-family
3.2 字體類型font-family
編輯:CSS基礎知識     

一、font-family屬性

字體,我們經常見到,在word的使用中,我們往往會使用不同的字體,什麼宋體、微軟雅黑等。在CSS中,使用font-family屬性來定義字體類型。

語法:

font-family:字體1,字體2,字體3;

說明:

font-family可指定多種字體,多個字體將按優先順序排列,以逗號隔開,注意逗號一定要是英文逗號。

舉例1:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-family屬性</title>
    <style type="text/css">
        #p1{font-family:宋體;}
        #p2{font-family:微軟雅黑;}
    </style>
</head>
<body>
    <p id="p1">字體為宋體</p>
    <p id="p2">字體為微軟雅黑</p>
</body>
</html>

在浏覽器預覽效果如下:

舉例1:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-family屬性</title>
    <style type="text/css">
        p{font-family:微軟雅黑,Arial,Times New Roman;}
    </style>
</head>
<body>
    <p> 學習網,讓這裡的一切成為襯托你成功的 。</p>
</body>
</html>

在浏覽器預覽效果如下:

分析:

對於“p{font-family:微軟雅黑,宋體,Times New Roman;}”這句代碼,初學者可能會覺得很疑惑。為什麼要為元素同時定義多個字體呢?

其實原因是這樣的:每個人的電腦裝的字體都不一樣,我們定義“p{font-family:微軟雅黑,Arial,Times New Roman;}”這句的意思是,p元素優先用“微軟雅黑”字體來顯示,如果你的電腦沒有裝“微軟雅黑”這個字體,那接著就用“Arial”字體來顯示,如果也沒有裝“Arial”字體,接著就用“Times New Roman”字體來顯示,以此類推。

否則,如果你只定義“p{font-family:微軟雅黑;}”的話,如果你的電腦沒有裝“微軟雅黑”字體,p元素就直接用浏覽器默認的“宋體”字體來顯示了,達不到你預期的效果。

默認情況下,浏覽器的字體是宋體。中文字體常用的有宋體、微軟雅黑,英文字體比較常用的是Times New Roman、Arial。

在CSS進階教程中,我們會更深入講解字體類型。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved