Sunday, January 9, 2011

[CSS] 淺談CSS的字型font-family屬性

要使用CSS設定字型,大家都會想到font-family這個屬性,不過,為什麼這個屬性要叫做font-family〈字型家族〉呢?其實是有原因的...
字型可分為五大家族

Serif家族:成員有Times、Times New Roman、Georgia
說明:字型都有截線(筆畫中有裝飾性的線條)

Sans-serif家族:成員有Verdana、Arial Black、Trebuchet MS、Arial、Geneva
說明:字型沒有截線,在電腦上比Serif家族的字型較具有可讀性。

Monospace家族:成員有Courier、Courier New、Andale Mono
說明:字型字母寬度都一樣,主要用來顯示程式碼的範例。

Cursive家族:成員有Comic Sans、Apple Chancery
說明:字型類似手寫。

Fantasy家族:LAST NINJA、Impact
說明:裝飾性風格,但並非每一台電腦都有安裝此類字型。

實際應用範例
body {
    font-family: Verdana, Geneva, Arial, sans-serif;
}
//或 參考蘋果官網字型
body {
    font-family: Helvetica,Arial,sans-serif;
}
說明:font-family的屬性值大小寫必須一樣才有效果,而家族總稱(範例為sans-serif)習慣上會放在最後,這樣的話,就算沒有前面指定的字型,瀏覽器會從同一個家族中提供一個通用的字型出來。

註1:有時你會看到值裡面有引號(例如: font-family: 'Trebuchet MS',Arial,sans-serif; ),那是因為那個字型是由兩個單字組成(Trebuchet MS),所以必須用引號(單或雙都可以)去標記。

註2:有些人會用簡寫語法(font)去一次定所有跟字體有關的屬性,用法可參考這邊

No comments:

Post a Comment