Loading...
訪客人次:
 
 
 
 
2008年6月1日 星期日 , ,  

CSS基礎教學(4)--文字的字型(字體)

在 CSS 中設定文字字型的語法如下
font-family:字型名;

這個屬性用來設定文字要用哪一種字型(字體)來顯示, 例如可以設定標楷體、Verdana...等, 若沒有設定字型的文字, 在 IE 中預設一般是以新細明體來呈現, 而在 Firefox 中則是預設為 Arial(另有進階設定, 詳情請自行參考 Firefox 的字型設定), 下面是簡單的範例
<DIV>這裡會是預設字型, some english words.</DIV>
<DIV style="font-family:標楷體;">這裡會是標楷體, some english words.</DIV>
<DIV style="font-family:Verdana;">這裡會是Verdana, some english words.</DIV>

但在使用時要注意, 在網頁上能不能依我們所設定的字型來呈現, 是要看該訪客的電腦本身有沒有安裝那一個字型, 而不是看網頁所在的電腦或主機有沒有那個字型, 所以假設今天你自己安裝了一些漂亮的字型, 也利用它設計出一個漂亮的網頁, 但放到網路上給其他人瀏覽時, 若訪客沒有裝你用的字型, 那麼他就只會看見用預設字型所呈現的文字, 這一點要非常注意, 所以有時候我們會設定多個字型, 當訪客沒有第一種字型時, 就用第二種字型呈現, 若第二種也沒有, 就用第三種來呈現..., 語法如下
font-family:字型名1,字型名2,字型名3,...;

也就是用逗號將各個字型名分開, 例如
<DIV style="font-family:Verdana,標楷體;">Here will be Verdana. 而這裡會是標楷體或新細明體</DIV>

如此瀏覽器就會由前往後依序找到第一個可使用的字型來呈現, 上例中, 若是以 Firefox 來看, 則英文的部份會是 Verdana 字型, 而中文的部份會是標楷體, 但若是在 IE 上來看, 則中文的部份會是新細明體, 並不是 IE 不支援這種語法, 也不是不支援標楷體, 而是它找到第一個可以用的字型是 Verdana, 所以它也用此字型來呈現中文, 但 Verdana 屬於英文字, 因此在中文上就使用預設字型來呈現, 在這點上就覺得 Firefox 的設計比較理想

當然, 若列出的字型訪客都沒有時, 還是會用預設的字型來呈現

一般而言, 變動性的文字不太會用一些特殊的字型, 通常都是用 OS 本身預設會安裝的那些字型, 而固定性的文字, 例如網站的標題, 或一些特殊的圖示, 則是用圖片的方式來表現, 如此就不會有使用者沒有該字型的困擾了

--gs--
{CSS基礎教學}{HTML基礎教學 FONT}
沒找到你要的東西嗎?歡迎留下你的問題!若是我知道的,我會盡力的回答。

0 意見:


張貼留言

廣告訊息會被我刪除