CSS font 複合屬性順序

admin發表於2020-05-18
CSS

font屬性用於設定字型樣式，具體參閱CSS font 字型一章節。

本文介紹一下font屬性複合簡化寫法的格式，它子屬性眾多，只介紹常用的幾個：

（1）.font-style：設定文字字型樣式。

（2）.font-variant：設定文字以大寫小體形式展現。

（3）.font-weight：設定文字的粗細。

（4）.font-size：設定文字字型大小。

（5）.font-family：設定文字字型名稱。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:200px;
  height:30px;
  background-color:#ccc;
  font:italic small-caps bold 12px/30px Verdana, sans-serif;
}
</style>
</head>
<body>
<div>antzone</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/08/132556dndj3gdi38jej38n.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很明顯font屬性的設定已經生效，採用簡化寫法。

程式碼分析如下：

（1）.italic設定文字為斜體。

（2）.small-caps設定文字為大寫小體，也就是大寫形式，但是字型會變小。

（3）.bold：設定文字為粗體。

（4）.12px/30px：12px設定字型大小，30px設定行高，將它們整體看做一個子屬性。

（5）.最後設定的是字型名稱，用哪一種字型來繪製文字。

（6）.子屬性之間用空格分隔，但是為什麼font屬性最後卻是用逗號分隔，後面會詳細說明。

注意點說明：

（1）.子屬性使用空格分隔：

前面講過，子屬性之間用空格分隔，但是為什麼font最後是用逗號分隔的。

最後設定的是font-family屬性，通常不是一個文字名稱，而是一個序列，字型名稱之間用逗號分隔，瀏覽器會按照次序查詢是否有對應的字型，如果有則應用，否則繼續向後查詢。最後一個通常不是某一個字型名稱，而是一個通用字型庫，也就是一類字型，儘可能保證文字能夠在不同作業系統都能夠得到正確顯示，如果在此字型庫中也沒有找到合適的字型，那麼使用預設字元顯示，上述程式碼中sans-serif（非襯線）就是一個字型庫。

上述程式碼子屬性順序是：

[CSS] 純文字檢視 複製程式碼
font:font-style font-variant font-weight font-size/line-height font-family;

毫無疑問使用上述順序是完全正確的，筆者一直是採用上述順序。

（2）.font複合寫法的底限：

font複合寫法至少要保留font-size與 font-family兩個子屬性，否則無效。

例如下面程式碼無效：

[CSS] 純文字檢視 複製程式碼
font:18px;

本意設定字型大小為18px，然而無效，下面寫法是有效的：

[CSS] 純文字檢視 複製程式碼
font:18px Verdana, sans-serif;

是否可以調整順序：

筆者本人都是採用上面程式碼順序，同時也推薦上述順序，這是慣例。

如果非要探究順序是否可以調整，下面是簡單測試總結：

（1）.前三個子屬性可以相互調整順序。

（2）.後面兩個子屬性不能調整順序，否則會導致其他子屬性失效。

相關文章