在 CSS 中設定文字字型的語法如下
這個屬性用來設定文字要用哪一種字型(字體)來顯示, 例如可以設定標楷體、Verdana...等, 若沒有設定字型的文字, 在 IE 中預設一般是以新細明體來呈現, 而在 Firefox 中則是預設為 Arial(另有進階設定, 詳情請自行參考 Firefox 的字型設定), 下面是簡單的範例
但在使用時要注意, 在網頁上能不能依我們所設定的字型來呈現, 是要看該訪客的電腦本身有沒有安裝那一個字型, 而不是看網頁所在的電腦或主機有沒有那個字型, 所以假設今天你自己安裝了一些漂亮的字型, 也利用它設計出一個漂亮的網頁, 但放到網路上給其他人瀏覽時, 若訪客沒有裝你用的字型, 那麼他就只會看見用預設字型所呈現的文字, 這一點要非常注意, 所以有時候我們會設定多個字型, 當訪客沒有第一種字型時, 就用第二種字型呈現, 若第二種也沒有, 就用第三種來呈現..., 語法如下
也就是用逗號將各個字型名分開, 例如
如此瀏覽器就會由前往後依序找到第一個可使用的字型來呈現, 上例中, 若是以 Firefox 來看, 則英文的部份會是 Verdana 字型, 而中文的部份會是標楷體, 但若是在 IE 上來看, 則中文的部份會是新細明體, 並不是 IE 不支援這種語法, 也不是不支援標楷體, 而是它找到第一個可以用的字型是 Verdana, 所以它也用此字型來呈現中文, 但 Verdana 屬於英文字, 因此在中文上就使用預設字型來呈現, 在這點上就覺得 Firefox 的設計比較理想
當然, 若列出的字型訪客都沒有時, 還是會用預設的字型來呈現
一般而言, 變動性的文字不太會用一些特殊的字型, 通常都是用 OS 本身預設會安裝的那些字型, 而固定性的文字, 例如網站的標題, 或一些特殊的圖示, 則是用圖片的方式來表現, 如此就不會有使用者沒有該字型的困擾了
--gs--
{CSS基礎教學}{HTML基礎教學 FONT}
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>
<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 意見:
張貼留言
廣告訊息會被我刪除