定義字體的各個屬性，可讓頁面板式變得更好看。前端
字體樣式包括字體類型、大小、顏色基本效果，另外還包括一些特殊的樣式，如字體粗細、下劃線、斜體、大小寫樣式等。web
1、定義字體類型
font-family 屬性用於設置字體。網頁中經常使用的字體有宋體、微軟雅黑、黑體等。面試
語法：api
一、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-familycode
- 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。
- 注意：其中不須要設置的屬性能夠省略（取默認值），但必須保留 font-size 和 font-family 屬性，不然font屬性將不起做用。
擴展：Unicode 字體
在 CSS 中設置字體名稱，直接寫中文是能夠的。可是在文件編碼（GB23十二、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 |
2、定義字體大小
font-size 屬性用於定義字體大小。
語法：
font-size``: 字號值;
字體的單位能夠是絕對單位，所定義的字體大小是固定的，大小顯示不會受外界因素影響。如：in(英寸),cm（釐米），mm（毫米）等單位。（不經常使用）
也可使用相對單位，所定義的大小不是固定的，會根據外界環境不斷變化。經常使用的有 px（像素），em 等單位。（經常使用）
3、定義字體顏色
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); 就表示半透明的紅色。
4、定義字體粗細
font-weight 屬性定義字體粗細。
語法：
font-weight``: ``normal | ``bold | ``bolder | ``lighter | ``100 | ``200 | ``300 | ``400 | ``500 | ``600 | ``700 | ``800 | ``900
- normal 表示默認值，即正常的字體，至關於取值爲 400；
- bold 表示粗體，至關於 700；
- 字體的粗細，是對字體粗細的一種量化方式，值越大就表示越粗，值越小就越細。
- 通常來講，更喜歡用數字來表示字體的粗細，取值範圍（100~900）
5、定義字體風格
font-style 屬性定義字體風格。
語法：
font-style``: ``normal | ``italic | ``oblique
- normal 表示默認值，即正常的字體；
- italic 表示斜體，是一種簡單的字體風格，對每一個字母的結構有一些小改動，來反映變化的外觀
- oblique 表示傾斜的字體，是正常豎直文本的一個傾斜版本。 Tips：一般狀況下，italic 和 oblique 文本在 web 瀏覽器中看上去徹底同樣。
6、定義下劃線
text-decoration 屬性來定義字體下劃線效果。
語法： text-decoration``: ``none | ``underline | ``blink | ``overline | ``line-through
- normal 表示默認值，即無裝飾字體；
- underline 表示下劃線效果；
- blink 表示閃爍效果；
- overline 表示上劃線效果；
- line-through 表示貫穿線效果。
7、定義字體大小寫
font-variant 屬性來定義字體大小效果。
語法：
font-variant``:``normal | ``small-caps
- normal 表示默認值，即正常的字體；
- small-caps 表示小型的大寫字母字體；
- 該屬性僅支持英文
**擴展：**CSS 還定義了一個 text-transform 屬性，該屬性也可以定義字體大小寫效果。
語法：
text-transform``:``none | ``capitalize | ``uppercase | ``lowercase
- normal 表示默認值，無轉化發生；
- capitalize 表示將每一個單詞的第一個字母轉換成大寫，其他無轉換髮生；
- upppercase 表示把全部字母都轉化成大寫；
- lowercase 表示把全部字母都轉化成小寫。
我目前是在職前端開發，若是你如今也想學習前端開發技術，在入門學習前端的過程中有碰見任何關於學習方法，學習路線，學習效率等方面的問題，你均可以申請加入我所在的前端學習交流裙：421374697。裏面彙集了一些正在自學前端的初學者,轉行者，初階者，我這裏也有我作前端技術這段時間整理的一些前端面試題，前端開發源碼教程，PDF文檔書籍教程,須要的話均可以找裙豬獲取。