CSS 字體樣式

　　定義字體的各個屬性，可以讓頁面板式變得更好看。

　　字體樣式包括字體類型、大小、顏色基本效果，另外還包括一些特殊的樣式，如字體粗細、下划線、斜體、大小寫樣式等。

一、定義字體類型

　　font-family 屬性用於設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等。

　　語法：

font-family:name;

　　name：表示字體名稱，可以使用多種字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

　 常用技巧：

　　1. 現在網頁中普遍使用14px+。
　　2. 盡量使用偶數的數字字號。ie6 等老式瀏覽器支持奇數會有 bug。
　　3. 各種字體之間必須使用英文狀態下的逗號隔開。
　　4. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位於中文字體名之前。
　　5. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如 font-family: "Times New Roman";。
　　6. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

　　font:綜合設置字體樣式 (重點)

　　font 是一個符合屬性，該屬性能夠設置多種字體屬性。

　　語法：

font: font-style | font-variant | font-weight | font-size/line-height | font-family

• • 　　使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
  •      注意：其中不需要設置的屬性可以省略（取默認值），但必須保留 font-size 和 font-family 屬性，否則font屬性將不起作用。

　　擴展：Unicode 字體

　　在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支持 類似微軟雅黑的中文。

　　方案一：可以使用英文來替代。 比如 font-family:"Microsoft Yahei"。

　　方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。

　　　　　　font-family: "\5FAE\8F6F\96C5\9ED1"，表示設置字體為“微軟雅黑”。

　　常用 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

 

二、定義字體大小

　　font-size 屬性用於定義字體大小。

　　語法：

font-size: 字號值;

　　字體的單位可以是絕對單位，所定義的字體大小是固定的，大小顯示不會受外界因素影響。如：in(英寸),cm（厘米），mm（毫米）等單位。（不常用）

　  也可以使用相對單位，所定義的大小不是固定的，會根據外界環境不斷變化。常用的有 px（像素），em 等單位。（常用）

　　

三、定義字體顏色

　　color 屬性來定義字體顏色。

　　語法：

color:color值；

• •    參數 color 表示顏色值；

　　顏色半透明 (CSS3) : 可以采取半透明的格式.

　　語法:

color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范圍 0~1之間    color: rgba(0,0,0,0.3)  

　　擴展：顏色表示法：

• • 　使用預定義的顏色的值，如 red、green、blue 等顏色；
    
  •    十六進制，如 #FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式；
  •    RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。

　　CSS3 在此同時還支持另外 3 種顏色表示法：

• • 　RGBA：在原來 RGB 顏色的基礎上增加了 Alpha 通道，可以定義文本的透明的顏色。如：color:rgba(255,0,0.5) ; 就可以定義半透明的紅色；
    
  •     HSL：該顏色表示法是使用色相（H）、飽和度（S）和亮度（L）來表示顏色的一種方法。如：color:hsl(0,100%,100%); 就表示紅色；
  •     HSLA：在原來 HSL 顏色的基礎上增加了 Alpha 通道。如：color:hsla(0,100%,100%,.5); 就表示半透明的紅色。

四、定義字體粗細

　　font-weight 屬性定義字體粗細。

　　語法：

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 

• • 　　normal  表示默認值，即正常的字體，相當於取值為 400；
    
  •      bold 表示粗體，相當於 700；
  •      字體的粗細，是對字體粗細的一種量化方式，值越大就表示越粗，值越小就越細。
  •      一般來說，更喜歡用數字來表示字體的粗細，取值范圍（100~900）

五、定義字體風格

　　font-style 屬性定義字體風格。

　　語法：

font-style: normal | italic | oblique

• •      normal 表示默認值，即正常的字體；
    
  •      italic 表示斜體，是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀
  •      oblique 表示傾斜的字體，是正常豎直文本的一個傾斜版本。

　　　Tips：通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。

六、定義下划線

　　text-decoration 屬性來定義字體下划線效果。

　　語法：

text-decoration: none | underline | blink | overline | line-through

• • 　　normal 表示默認值，即無裝飾字體；
  •      underline 表示下划線效果；
  •      blink 表示閃爍效果；
  •      overline 表示上划線效果；
  •      line-through 表示貫穿線效果。

七、定義字體大小寫

　　font-variant 屬性來定義字體大小效果。

　　語法：

font-variant:normal | small-caps

• •      normal 表示默認值，即正常的字體；
    
  •      small-caps 表示小型的大寫字母字體；
  •      該屬性僅支持英文

　　擴展：CSS 還定義了一個 text-transform 屬性，該屬性也能夠定義字體大小寫效果。

　　語法：

text-transform:none | capitalize | uppercase | lowercase

• • 　normal 表示默認值，無轉化發生；
  •     capitalize 表示將每個單詞的第一個字母轉換成大寫，其余無轉換發生；
  •     upppercase 表示把所有字母都轉化成大寫；
  •   lowercase 表示把所有字母都轉化成小寫。