CSS字體樣式屬性彙總

字體樣式屬性大全

字體樣式(font style)

font屬性

是一個簡寫屬性，把針對字體的屬性設置在一個屬性中，包括了：

1. font-style
2. font-variant
3. font-weight
4. font-size / line-height
5. font-family

這5個屬性必須按照順序排列，可以不設置其中的某些值，但至少要指定字體大小(font-size)和字體系列(font-family)

.text1{
    font: italic arial, sans=serif
}
.text2{
    font: italic bold 12px/30px arial,sans-serif
}

font-style

用於定義字體的風格

值	描述
normal	默認值，瀏覽器顯示一個標準的字體樣式
italic	瀏覽器會顯示一個斜體的字體樣式
oblique	瀏覽器會顯示一個傾斜的 字體樣式
inherit	規定應該從父元素繼承字體樣式

.text1{font-style:normal}
.text2{font-style:italic}
.text3{font-style:oblique}

font-variant

font-variant 屬性設置小型大寫字母的字體顯示文本，這意味着所有的小寫字母均會被轉換爲大寫，但是所有使用小型大寫字體的字母與其餘文本相比，其字體尺寸更小

值	描述
normal	默認值，瀏覽器會顯示一個標準的字體
small-caps	瀏覽器會顯示小型大寫字母的字體
inherit	規定應該從父元素繼承 font-variant 屬性的值

.text{
    font-variant: small-caps;  //小寫字母將會轉變成大寫字母
}

font-weight

用於設置文本的字體粗細

數字值 400 相當於 關鍵字 normal，700 等價於 bold。每個數字值對應的字體加粗必須至少與下一個最小數字一樣細，而且至少與下一個最大數字一樣粗

值	描述
normal	默認值，標準字符
bold	定義粗體字符
bolder	定義更粗的字符
lighter	定義更細的字符
100~900	定義由粗到細的字符。400等同於normal，700等同於bold
inherit	規定應該從父元素繼承字體的粗細

.text1{
    font-weight: normal;
}
.text2{
    font-weight:bold;
}
.text3{
    font-weight: 600;
}

font-size / line-height

設置字體的尺寸/字體大小

實際上它設置的是字體中字符框的高度；實際的字符字形可能比這些框高或矮（通常會矮）。

各關鍵字對應的字體必須比一個最小關鍵字相應字體要高，並且要小於下一個最大關鍵字對應的字體

還可以設置爲數值，單位有px、em、%、pt、cm等

值	描述
xx-small/x-small/small/medium/large/x-large/xx-large	medium爲默認值
smaller	把font-size設置爲比父元素更小的尺寸
larger	把font-size設置爲比父元素更大的尺寸
length(一個數值)	把font-size設置爲一個固定的值
%	把font-size設置爲基於父元素的一個百分比值
inherit	規定應該從父元素繼承字體尺寸

font-family

用於規定元素的字體

可以設置多個值，如果一個不符合就嘗試下一個值，每個值之間用逗號分隔

有兩種類型的字體系列名稱：

1. 指定的系列名稱：具體的名稱，如’times’、‘courier’、‘arial’
2. 通常字體系列名稱：如’serif’、‘sans-serif’、‘cursive’、‘fantasy’、’ monospace ’

還有一種特殊的屬性值就是inherit，表示從父元素繼承字體樣式

.text1{
    font-family: 'Times New Roman', Georgia, Serif;
}
.text2{
    font-family:Arial, Verdana, Sans-serif;
}

使用技巧

1. 儘量使用偶數的數字字號
2. 儘量使用系統默認字體
3. 常用的中文字體有微軟雅黑和宋體，英文字體又Arial
4. 字體中包含空格、/、#、$等符號時，需要用單引號或雙引號

CSS Unicode字體樣式—可用Unicode編碼來替換字體樣式，避免錯誤

字體名稱	英文名稱	Unicode編碼
宋體	SimSun	\5B8B\4F53
新宋體	NSimSun	\65B0\5B8B\4F53
黑體	SimHei	\9ED1\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷體_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隸書	LiSu	\96B6\4E66
幼圓	YouYuan	\5E7C\5706
華文細黑	STXiHei	\534E\6587\7EC6\9ED1
細明體	MingLiU	\7EC6\660E\4F53
新細明體	PMingLiU	\65B0\7EC6\660E\4F53

.text{
    font-family: '\5B8B\4F53'
}

還有一種特殊的屬性值就是inherit，表示從父元素繼承字體樣式

color

用於定義字體顏色

取值方式有三種：

1. 預定義的顏色，如red、green、blue等
2. 十六進制，如#ff0000
3. RGB代碼，如rgb(255,0,0)、rgb(100%,0%,0%)、rgba(255,0,0,0.5)

.text1{
    color: red;
}
.text2{
    color: #f40;
}
.text3{
    color: rgb(255,0,0);
}

文本樣式

text-indent—文本對齊方式

縮進文本：文本內容第一行縮進

值	描述
5em	縮進5em個單位，值可以是負值，變成懸掛縮進
20%	縮進父元素的百分比個寬度
inherit	繼承父元素的屬性

.text1{
    text-indent: -5em;
}

###　word-spacing—字體間隔

設置字體間隔，默認爲0

值	描述
normal	默認值
length(一個數值)	定義字體間隔
inherit	從父元素繼承的屬性

.text1{
    word-spacing: 5em;  //5px等
}

text-transform—文本大小寫

處理文本的大小寫，共有四個值：none、uppercase、lowercase、capitalize

值	描述
none	默認值
capitalize	文本中的每個單詞以大寫字母開頭
uppercase	文本中字母全部爲大寫
lowercase	文本中字母全部爲小寫
inherit	繼承父元素的屬性值

.text1{
    text-transform: uppercase;
}
.text2{
    text-transform: lowercase;
}

text-decoration—文本裝飾

對文本設置某種效果，如加下劃線。如果後代元素沒有自己的裝飾，父元素元素上設置的裝飾會“延伸”到後代元素中

值	描述
none	默認值
underline	定義文本下劃線
overline	文本上劃線
line-through	文本中劃線(相當於刪除線)
blink	文本閃爍
inherit	繼承父元素的屬性值

.text1{
    text-decoration: underline;
}
.text2{
    text-decoration: blink;
}
.text3{
    text-decoration: overline underline;
}

white-space

定義如何處理文本中的空白符

值	描述	空白符	換行符	自動換行
pre-line	合併空白符序列，但是保留換行符	合併	保留	允許
normal	默認，空格會被瀏覽器忽略	合併	忽略	允許
norwrap	文本不會換行，文本會在在同一行上繼續，直到遇到 標籤爲止	合併	忽略	不允許
pre	空白會被瀏覽器保留	保留	保留	不允許
pre-wrap	保留空白符序列，但是正常地進行換行	保留	保留	允許
inherit	繼承父元素的屬性值

.text1{
    white-space: norwrap;
}

text-align—文本對齊方式(水平對齊)

text-align 屬性規定元素中的文本的水平對齊方式

值	描述
left	文本左對齊。默認值：由瀏覽器決定
right	文本右對齊
center	文本居中對齊
justify	文本兩端對齊
inherit	繼承父元素的屬性值

.text{
    text-align: center;
}

vertical-align—文本垂直對齊

規定文本的垂直對齊方式，值包括：

inherit | top | bottom | text-top | text-bottom | baseline | middle | sub | super

.text{
 vertical-align: bottom;   
}

text-overflow—文本溢出屬性

該屬性用於定義當文本溢出時元素髮生的操作，默認值爲clip

值	描述
clip	修剪文本，超出則被裁剪
ellipsis	用省略號來代替被裁剪的文本
string	使用給定字符串來代替被裁剪的文本(Firefox有效)

.text1 {
    text-overflow: ellipsis;
}