CSS font 複合簡化格式

admin發表於2018-12-08

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).後面兩個子屬性不能調整順序,否則會導致其他子屬性失效。

相關文章