定義字體的各個(gè)屬性又憨，可以讓頁面板式變得更好看。
字體樣式包括字體類型、大小霜旧、顏色基本效果，另外還包括一些特殊的樣式惩嘉，如字體粗細(xì)挠阁、下劃線、斜體硫朦、大小寫樣式等贷腕。
一、定義字體類型
font-family 屬性用于設(shè)置字體咬展。網(wǎng)頁中常用的字體有宋體泽裳、微軟雅黑、黑體等破婆。
語法：
1涮总、font-family``:name;
name：表示字體名稱，可以使用多種字體祷舀，中間以逗號隔開瀑梗，表示如果瀏覽器不支持第一個(gè)字體烹笔，則會嘗試下一個(gè)，直到找到合適的字體抛丽。
** 常用技巧：**
1. 現(xiàn)在網(wǎng)頁中普遍使用14px+谤职。
2. 盡量使用偶數(shù)的數(shù)字字號。ie6 等老式瀏覽器支持奇數(shù)會有 bug亿鲜。
3. 各種字體之間必須使用英文狀態(tài)下的逗號隔開允蜈。
4. 中文字體需要加英文狀態(tài)下的引號，英文字體一般不需要加引號狡门。當(dāng)需要設(shè)置英文字體時(shí)陷寝，英文字體名必須位于中文字體名之前。
5. 如果字體名中包含空格其馏、#凤跑、$等符號，則該字體必須加英文狀態(tài)下的單引號或雙引號叛复，例如 font-family: "Times New Roman";仔引。
6. 盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示褐奥。
font:綜合設(shè)置字體樣式 (重點(diǎn))
font 是一個(gè)符合屬性咖耘，該屬性能夠設(shè)置多種字體屬性。
語法：
font``: font-style | font-variant | font-weight | font-size/line-height | font-family
- 使用font屬性時(shí)撬码，必須按上面語法格式中的順序書寫儿倒，不能更換順序，各個(gè)屬性以空格隔開呜笑。
- 注意：其中不需要設(shè)置的屬性可以省略（取默認(rèn)值）夫否，但必須保留 font-size 和 font-family 屬性，否則font屬性將不起作用叫胁。
擴(kuò)展：Unicode 字體
在 CSS 中設(shè)置字體名稱凰慈，直接寫中文是可以的。但是在文件編碼（GB2312驼鹅、UTF-8 等）不匹配時(shí)會產(chǎn)生亂碼的錯(cuò)誤微谓。xp 系統(tǒng)不支持 類似微軟雅黑的中文。
方案一：可以使用英文來替代输钩。 比如 font-family:"Microsoft Yahei"豺型。
方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯(cuò)誤。使用 Unicode 寫中文字體名稱买乃，瀏覽器是可以正確的解析的触创。
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設(shè)置字體為“微軟雅黑”为牍。
常用 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 |
| 華文細(xì)黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 細(xì)明體 | MingLiU | \7EC6\660E\4F53 |
| 新細(xì)明體 | PMingLiU | \65B0\7EC6\660E\4F53 |
二哼绑、定義字體大小
font-size 屬性用于定義字體大小岩馍。
語法：
font-size``: 字號值;
字體的單位可以是絕對單位，所定義的字體大小是固定的抖韩，大小顯示不會受外界因素影響蛀恩。如：in(英寸),cm（厘米），mm（毫米）等單位茂浮。（不常用）
也可以使用相對單位双谆，所定義的大小不是固定的，會根據(jù)外界環(huán)境不斷變化席揽。常用的有 px（像素）顽馋，em 等單位。（常用）
三幌羞、定義字體顏色
color 屬性來定義字體顏色寸谜。
語法：
color``:color值；
- 參數(shù) color 表示顏色值属桦；
顏色半透明 (CSS3) : 可以采取半透明的格式.
語法:
color``: rgba(r,g,b,a) a 是alpha 透明的意思 取值范圍 ``0``~``1``之間 ``color``: rgba(``0``,``0``,``0``,``0.3``)
擴(kuò)展：顏色表示法：
- 使用預(yù)定義的顏色的值熊痴，如 red、green聂宾、blue 等顏色果善；
- 十六進(jìn)制，如 #FF0000系谐，#FF6600巾陕，#29D794等。實(shí)際工作中纪他，十六進(jìn)制是最常用的定義顏色的方式鄙煤；
- RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)止喷，如果使用RGB代碼的百分比顏色值馆类，取值為0時(shí)也不能省略百分號混聊，必須寫為0%弹谁。
CSS3 在此同時(shí)還支持另外 3 種顏色表示法：
- RGBA：在原來 RGB 顏色的基礎(chǔ)上增加了 Alpha 通道，可以定義文本的透明的顏色句喜。如：color:rgba(255,0,0.5) ; 就可以定義半透明的紅色预愤；
- HSL：該顏色表示法是使用色相（H）、飽和度（S）和亮度（L）來表示顏色的一種方法咳胃。如：color:hsl(0,100%,100%); 就表示紅色植康；
- HSLA：在原來 HSL 顏色的基礎(chǔ)上增加了 Alpha 通道。如：color:hsla(0,100%,100%,.5); 就表示半透明的紅色展懈。
四销睁、定義字體粗細(xì)
font-weight 屬性定義字體粗細(xì)供璧。
語法：
font-weight``: ``normal | ``bold | ``bolder | ``lighter | ``100 | ``200 | ``300 | ``400 | ``500 | ``600 | ``700 | ``800 | ``900
- normal 表示默認(rèn)值，即正常的字體冻记，相當(dāng)于取值為 400睡毒；
- bold 表示粗體，相當(dāng)于 700冗栗；
- 字體的粗細(xì)演顾，是對字體粗細(xì)的一種量化方式，值越大就表示越粗隅居，值越小就越細(xì)钠至。
- 一般來說，更喜歡用數(shù)字來表示字體的粗細(xì)胎源，取值范圍（100~900）
五棉钧、定義字體風(fēng)格
font-style 屬性定義字體風(fēng)格。
語法：
font-style``: ``normal | ``italic | ``oblique
- normal 表示默認(rèn)值乒融，即正常的字體掰盘；
- italic 表示斜體，是一種簡單的字體風(fēng)格赞季，對每個(gè)字母的結(jié)構(gòu)有一些小改動愧捕，來反映變化的外觀
- oblique 表示傾斜的字體，是正常豎直文本的一個(gè)傾斜版本申钩。
Tips：通常情況下次绘，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。
六撒遣、定義下劃線
text-decoration 屬性來定義字體下劃線效果邮偎。
語法：
text-decoration``: ``none | ``underline | ``blink | ``overline | ``line-through
- normal 表示默認(rèn)值，即無裝飾字體义黎；
- underline 表示下劃線效果禾进；
- blink 表示閃爍效果；
- overline 表示上劃線效果廉涕；
- line-through 表示貫穿線效果泻云。
七、定義字體大小寫
font-variant 屬性來定義字體大小效果狐蜕。
語法：
font-variant``:``normal | ``small-caps
- normal 表示默認(rèn)值宠纯，即正常的字體；
- small-caps 表示小型的大寫字母字體层释；
- 該屬性僅支持英文
擴(kuò)展：CSS 還定義了一個(gè) text-transform 屬性婆瓜，該屬性也能夠定義字體大小寫效果。
語法：
text-transform``:``none | ``capitalize | ``uppercase | ``lowercase
- normal 表示默認(rèn)值，無轉(zhuǎn)化發(fā)生廉白；
- capitalize 表示將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫个初，其余無轉(zhuǎn)換發(fā)生；
- upppercase 表示把所有字母都轉(zhuǎn)化成大寫猴蹂；
- lowercase 表示把所有字母都轉(zhuǎn)化成小寫勃黍。
我目前是在職前端開發(fā)，如果你現(xiàn)在也想學(xué)習(xí)前端開發(fā)技術(shù)晕讲，在入門學(xué)習(xí)前端的過程當(dāng)中有遇見任何關(guān)于學(xué)習(xí)方法覆获，學(xué)習(xí)路線，學(xué)習(xí)效率等方面的問題瓢省，你都可以申請加入我所在的前端學(xué)習(xí)交流裙：421374697弄息。里面聚集了一些正在自學(xué)前端的初學(xué)者,轉(zhuǎn)行者，初階者勤婚，我這里也有我做前端技術(shù)這段時(shí)間整理的一些前端面試題摹量，前端開發(fā)源碼教程，PDF文檔書籍教程,需要的話都可以找裙豬獲取馒胆。
