摘要：本博文主要分為兩部分，第一部分介紹字體屬性，第二部分則介紹了文本常用屬性二字體屬性字體系列首先介紹一下什么是字體系列所謂字體系列我理解的就同一字體下的不同風(fēng)格的具體字體的集合。這里的楷體，就可以看做是一個(gè)多帶帶的字體系列。

目前在做IFE的練習(xí)，初步學(xué)習(xí)到CSS內(nèi)容，所以做了總結(jié)。
本博文主要分為兩部分，第一部分介紹CSS字體屬性，第二部分則介紹了文本常用屬性

S1 首先介紹一下什么是字體系列:

所謂字體系列,我理解的就同一字體下 的不同風(fēng)格的具體字體的集合。通俗類比一下，我們知道楷書下有不同風(fēng)格的字體，比如顏體、柳體、瘦金體等等，這些是具體的不同風(fēng)格的字體。但是，他們都屬于楷體，只是具體的細(xì)節(jié)有差異。這里的楷體，就可以看做

是一個(gè)多帶帶的字體系列。

S2 接下來介紹，CSS預(yù)定義的5種通用字體系列
??Serif字體: 有修飾性的襯線（修飾線條），而且字符之間是成比例的（寬度不一致）;
??Sans-serif字體: 沒有襯線，字符成比例;
??monospace字體: 每個(gè)字符具有相同寬度的字體，通常用于代碼列表;
??Cursive字體: 模擬人類筆跡的字體，具有流動(dòng)的連接筆畫;
??Fantasy字體: 裝飾性的各種 “浮夸” 字體

S3 定義字體系列的方法
使用font-family屬性來定義字體系列
??A1 可以指定一個(gè)通用字體系列;
??A2 可以指定一個(gè)具體的字體系列，注意當(dāng)該具體字體系列在客戶端不可用時(shí)，瀏覽器會(huì)使用默認(rèn)設(shè)置字體顯示;
所以，最好的方法是，結(jié)合特定字體名和通用字體系列，以實(shí)現(xiàn)平穩(wěn)退化原則

S4 特別注意
如果一個(gè)字體名中有一個(gè)/多個(gè)空格/特殊字符如#、$之類的，需要用引號(hào)聲明字體，如下代碼例子:

    p { font-family: "Trebuchet MS", Verdana, sans-serif; }

網(wǎng)頁安全字體
關(guān)于網(wǎng)頁安全字體的概念，參見MDN基本文本和字體樣式;

S1 首先介紹字體加粗屬性font-weight
??A1 值是關(guān)鍵字/100~900的整百數(shù)值，
??一般情況下，400≈normal / 700≈bold，
??關(guān)于數(shù)值加粗的原理，詳情見 CSS權(quán)威指南P109 ,真正用的時(shí)候，一般直接用數(shù)值試一試即可

??A2 具有繼承性

S2 bolder/lighter屬性值的原理
??A1 確定繼承自父元素的font-weight值;
??A2 選取比繼承的font-weight對應(yīng)值 + 更粗一級(jí)數(shù)值中的 + 最小的數(shù)值;
??A3 如果繼承的font-weight值 已經(jīng)是 最大900/最小100，那么bolder/lighter值保持不變

S1 首先介紹字體大小屬性font-size
??A1 值可以是 關(guān)鍵字/ length / percentage / em / rem
??關(guān)鍵字: 實(shí)際開發(fā)中很少使用
??em/百分比: 根據(jù)父元素的字體大小計(jì)算， 1em = 當(dāng)前元素的父元素上 設(shè)置的字體大小
????因?yàn)榫哂欣^承性，所以可能會(huì)導(dǎo)致縮放失控，比如:
????A 祖先元素:12px;
????B 父元素: 120%, 即 12 * 1.2 = 14.4px(可能會(huì)取整);
????C 子元素: 135%, 即 14.4 * 1.35 = 19.44px

??rem: 1rem 等于 HTML 中的根元素的字體大小,推薦使用

??A2 具有繼承性

S2 明確一個(gè)重要概念:
??A1 每種字體的字符設(shè)計(jì)大小一般都等于小于 其模板框em框大小;
??A2 font-size的作用就是設(shè)置給定字體的em框的大小，而不能保證實(shí)際顯示的字符大小

簡而言之，就是font-size負(fù)責(zé)的是模具的大小，而不是真正實(shí)際字符的大小

S1 字體風(fēng)格屬性font-style
??A1 值可以是 normal / italic/oblique (通常兩者效果是一樣的，都是斜體)

S2 字體變形屬性font-variant
??A1 值可以是 small-caps, 用于創(chuàng)建 小型大寫字母文本（具體效果見CSS權(quán)威指南P124）

S3 字體拉伸屬性font-stretch，了解即可
S4 字體大小調(diào)整屬性font-size-adjust，了解即可

S1 所有字體屬性的 集合屬性font
??A1 一般值是 font-style/font-weight/font-variant(可交換順序) + font-sieze + font-family

??A2 值還可以是 line-height （不推薦合并寫，不利于維護(hù)）

??A3 值還可以是 caption/icon/menu等系統(tǒng)字體設(shè)置，可以創(chuàng)造出和默認(rèn)操作系統(tǒng)一樣的字體效果 (見P131)

S2 特別注意，所有未顯式賦值的font值，都會(huì)被瀏覽器自動(dòng)賦予默認(rèn)值

S1 具體過程了解即可，見P132-133

S1 文本縮進(jìn)屬性text-indent
??A1 值可以是 length / em/百分比 (相對于包含塊的寬度值)
??其中，值的長度可以是負(fù)值，從而創(chuàng)造出“懸掛縮進(jìn)的效果”

??A2 應(yīng)用于 塊級(jí)元素，無法應(yīng)用于行內(nèi)元素&替換元素(如果想要行內(nèi)元素有縮進(jìn)效果，可以使用左內(nèi)邊距/外邊距)

??A3 縮進(jìn)只應(yīng)用于一個(gè)塊級(jí)元素的第一行內(nèi)容

??A4 具有繼承性

S2 文本水平對齊屬性text-align
??A1 值可以是 left / center /right / justify
??其中，justify表示兩端對齊文本 (P140)

??A2 應(yīng)用于 塊級(jí)元素
??A3 具有繼承性

S1 什么是line-height屬性
??A1 指的是文本行之間的 最小基線距離，換言之，文本行間的距離可能比line-height值更大
??A2 行間距 = line-height值 - font-size值

S2 理解行內(nèi)元素高度如何確定(并不絕對精確，只是大概情況)
??A1 font-size值， 確定了 內(nèi)容區(qū)大小;
??A2 line-height值，確定了 行內(nèi)框高度;
??A3 行框（從最高行內(nèi)框的頂部 到 最低行內(nèi)框的底部），確定了 一行行內(nèi)元素的高度

S3 屬性特點(diǎn)
??A1 值可能是 length / em / number / normal
??normal值，通常情況下是字體大小的 1.2倍 (font-size * 1.2)
??em/百分比，相對于的是 元素的字體大小(注意，不是父元素的字體大小，只有沒有顯式繼承該元素的fz,才會(huì)根據(jù)fz繼承性向上找)

??A2 可以應(yīng)用于所有元素 (對于塊級(jí)元素和內(nèi)聯(lián)元素的區(qū)別，詳見其他博文)

??A3 可以繼承
????因?yàn)榫哂欣^承性，所以可能會(huì)有以下情況: 繼承的div元素的line-height值小于 顯式設(shè)置的fz值，導(dǎo)致?lián)頂D
????解決方法是，使用number作為“繼承因子”，這樣各個(gè)元素都會(huì)根據(jù)自己的fz值，來計(jì)算line-height值了

S1 文本垂直對齊屬性 vertical-align
??A1 值可以是 middle/bottom等關(guān)鍵字 length / em/百分比 (相對于該元素的line-height值)
??A2 應(yīng)用于 行內(nèi)元素和替換元素(圖像/表單等)
??A3 不可以繼承
??A4 注意，所有垂直對齊的元素都會(huì)影響行高，換句話說，一行元素的行高 會(huì)包含住垂直對齊的高度

S2 基線對齊情況
??A1 對行內(nèi)元素，基線對齊是指：元素的基線與其 父元素的基線 對齊;
??A2 對替換元素，基線對齊是指：元素的底端與其 父元素的基線 對齊 （因?yàn)樘鎿Q元素壓根就沒有基線）
??這就會(huì)導(dǎo)致，可能圖像下方會(huì)出現(xiàn)一段空白的問題

??A3 百分比/em 對齊情況
????會(huì)把 行內(nèi)元素的基線 /替換元素的底邊，相對于父元素的基線升高/降低數(shù)值

S3 居中對齊情況
??A1 對middle值，指的是： 元素行內(nèi)框的中點(diǎn) 與其 父元素基線上方0.5ex處的一個(gè)點(diǎn)對齊;

S4 頂端/底端對齊情況
??A1 對bottom值，指的是： 元素行內(nèi)框的底部 與其 所屬行框的底部對齊;
??A2 對text-bottom值，指的是: 對行內(nèi)元素的 行內(nèi)文本內(nèi)容區(qū) 對齊 + 對替換元素?zé)o效

S1 字間隔屬性 word-spacing
??A1 值可以是 length / em / normal
??A2 應(yīng)用于 所有元素
??A3 用于修改字和字之間的距離，了解即可

S2 字母間隔屬性 letter-spacing
??A1 值可以是 length / em / normal
??A2 應(yīng)用于 所有元素
??A3 可以用來制造出 突出強(qiáng)調(diào)的效果 (見P152)

S1 文本大小寫 轉(zhuǎn)換屬性 text-transform
??A1 值可以是 uppercase等關(guān)鍵字
??A2 應(yīng)用于 所有元素

S1 文本裝飾線 屬性 text-decoration
??A1 值可以是 underline等關(guān)鍵字
??A2 應(yīng)用于 所有元素
??A3 不可以繼承,但可以 覆蓋下劃線樣式（P158）

S1 文本陰影 屬性 text-shadow
??A1 值可以是 color + 右偏移長度 + 下偏移長度 + [模糊半徑]
??A2 應(yīng)用于 所有元素
??A3 不可以繼承

S2 可以實(shí)現(xiàn)多重陰影

S1 文本空白符和換行屬性 white-space
??A1 值可以是 pre / nowrap / pre-wrap / pre-line
??值為pre時(shí)：保留HTML內(nèi)容中的空格
??值是nowrap: 阻止元素內(nèi)的文本換行

??A2 應(yīng)用于 所有元素
??A3 不可以繼承
??A4 具體表格見 P162

??1 CSS權(quán)威指南;
??2 MDN的 基本文本和字體樣式;
??3 CSS 文本;
??4 CSS 字體;