CSS字體樣式（font）

101237 閱讀 0 評論 0 點贊

除了好看的背景和顏色外，字體設置也是網(wǎng)頁設計中的重要組成部分，合適的字體不僅會使頁面更加美觀，也可以提升用戶體驗。CSS 中提供了一系列用于設置文本字體樣式的屬性，比如更改字體，控制字體大小和粗細等等。

通過學習上述這幾個 CSS 屬性，我們可以實現(xiàn)給 HTML 中的文字設置字體、大小、風格、傾斜、加粗等。

1. font-family

font-family 屬性用于設置一個元素的字體，字體就是像宋體、楷體等。

通過 font-family 屬性，可以同時聲明多種字體，字體之間使用逗號分隔。根據(jù)字體的調(diào)用原則，會優(yōu)先調(diào)用第一種字體，如果沒有找到，則會嘗試調(diào)用下一個字體，如果都找不到則調(diào)用默認字體。

示例：

例如為下面這個 <p> 標簽中的文本設置字體：

<p>dotcpp編程</p>

可以使用標簽選擇器，然后在 font-family 屬性中設置：

p{font-family:'Times New Roman','sans-serif', 宋體, 楷體;}

在聲明字體時，我們應該分別聲明英文字體和中文字體，且英文字體的聲明應該在中文字體之前。因為絕大部分中文字體里包含英文字母，但是不是很好看，而英文字體里不包含中文字符。所以如果我們不希望用中文字體來顯示英文，就一定要記得先聲明英文字體。先聲明的會先調(diào)用。

常用英文字體：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。

常用中文字體：宋體 SimSun、黑體 SimHei、微軟雅黑 Microsoft YaHei、仿宋 FangSong、楷體 KaiTi 等。

2. font-style

font-style 設置字體的風格，可以將字體設置成斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。

此屬的常用屬性值如下所示：

3. font-weight

font-weight 屬性用于設置顯示元素的文本中所用的字體加粗。

此屬性的常用屬性值如下所示：

屬性	描述
normal	默認值，標準字體
bold	粗體字體
bolder	更粗的字體
lighter	更細的字體
100、200、300、400、500、600、700、800、900	由細到粗的設置字體粗細，100 為最細的字體，400 等同于 normal，700 等同于 bold
inherit	從父元素繼承字體的粗細

4. font-size

font-size 屬性用于設置字體的大小，常用的單位為 px，即像素。

px 是 Pixel 的縮寫，是可以在數(shù)字顯示設備上顯示和表示的數(shù)字圖像或圖形的最小單位。像素是數(shù)字圖形中的基本邏輯單元，像素也稱為圖像元素。

屬性	描述
xx-small、x-small、small、medium、large、x-large、xx-large	以關鍵字的形式把字體設置為不同的大小，從 xx-small 到 xx-large 依次變大，默認值為 medium
smaller	為字體設置一個比父元素更小的尺寸
larger	為字體設置一個比父元素更大的尺寸
length	以數(shù)值加單位的形式把字體設置為一個固定尺寸，例如 18px、2em
%	以百分比的形式為字體設置一個相對于父元素字體的大小
inherit	從父元素繼承字體的尺寸

5. font-variant

font-variant 屬性可以將文本中的小寫英文字母轉(zhuǎn)換為小型大寫字母（轉(zhuǎn)換后的大寫字母與轉(zhuǎn)換前小寫字母的大小相仿，所以稱之為小型大寫字母）。font-variant 屬性的可選值如下：

屬性	描述
normal	默認值，瀏覽器會顯示一個標準的字體
small-caps	將文本中的小寫英文字母轉(zhuǎn)換為小型大寫字母
inherit	從父元素繼承 font-variant 屬性的值

6. font

font 屬性用于在一個聲明中設置所有的字體屬性，各個屬性之間使用空格隔開。也就是上述幾個屬性的綜合簡寫屬性。

如果我們使用 font 屬性來設置字體樣式，設置順序分別是：font-style、font-variant、font-weight、 font-size/line-height、font-family?？梢圆辉O置其中的某個值，未設置的屬性會使用其默認值。