CSS基礎教學(7)--文字字型的綜合設定

在前面的文章中, 有介紹過了文字的大小、字型(字體)、粗體、斜體等 CSS 的屬性, 其實這些東西可以在一個屬性中就全部設定完成, 語法如下

font: [ font-style | font-weight ] font-size [ / line-height ] font-family ;

各個屬性值之間要用空格來隔開
在這個屬性中, 必要設的值是文字大小與字型, 其他則是非必要的, 例如

<DIV style="font:9pt 標楷體;">一些文字</DIV>

但若是用在 IE 上面, 則字型也是非必要的, 只須設定文字大小即可

在字型的部份, 同樣也可以設定多個字型, 方法一樣是用逗號來串接各字型

<DIV style="font:9pt Verdana,標楷體;">some english,一些文字</DIV>

註：在 IE 上看這個執行結果時, 中文字不會是標楷體, 原因請參考CSS基礎教學(4)--文字的字型(字體)

而斜體與粗體的設定是加在文字大小的前面, 可以同時存在, 也可以只設定一個, 同時存在時兩者的順序可以互換

<DIV style="font:italic 16pt 標楷體;">一些文字</DIV>
<DIV style="font:bold 16pt 標楷體;">一些文字</DIV>
<DIV style="font:italic bold 16pt 標楷體;">一些文字</DIV>
<DIV style="font:bold italic 16pt 標楷體;">一些文字</DIV>

上面最後兩個的結果會是一樣的

設定行高時比較特別, 必須在行高值的前面加上 【/】 斜線符號, 例如

<DIV>這裡一般預設的行高</DIV>
<DIV>這裡一般預設的行高</DIV>
<DIV style="font:12pt /1mm 新細明體;">這裡是 1 mm 的行高</DIV>
<DIV>這裡一般預設的行高</DIV>
<DIV>這裡一般預設的行高</DIV>

除了斜體與粗體這兩個值的順序可以互換之外, 其他的值必需按上述的順序設定, 否則無法得到正確的結果

<DIV style="font:italic bold 9pt 標楷體;">這裡會呈現正確的樣式(italic bold 9pt 標楷體)</DIV>
<DIV style="font:italic bold 標楷體 9pt;">在 IE 中這裡只會呈現 italic bold 的樣式, 在 FF 中則所有的樣式皆完全無效</DIV>
<DIV style="font:標楷體 italic bold 9pt;">這裡所有的樣式皆完全無效</DIV>
<DIV style="font:9pt 標楷體 italic bold;">這裡只會呈現 9pt 的樣式</DIV>
<DIV style="font:9pt italic bold 標楷體;">這裡只會呈現 9pt 的樣式</DIV>
<DIV style="font:標楷體 9pt italic bold;">這裡所有的樣式皆完全無效</DIV>

--gs--
{CSS基礎教學}{HTML基礎教學 FONT}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。