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

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

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

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

是一個多帶帶的字體系列。

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

S3 定義字體系列的方法
使用font-family屬性來定義字體系列
??A1 可以指定一個通用字體系列;
??A2 可以指定一個具體的字體系列，注意當該具體字體系列在客戶端不可用時，瀏覽器會使用默認設置字體顯示;
所以，最好的方法是，結合特定字體名和通用字體系列，以實現平穩退化原則

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

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

網頁安全字體
關于網頁安全字體的概念，參見MDN基本文本和字體樣式;

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

??A2 具有繼承性

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

S1 首先介紹字體大小屬性font-size
??A1 值可以是 關鍵字/ length / percentage / em / rem
??關鍵字: 實際開發中很少使用
??em/百分比: 根據父元素的字體大小計算， 1em = 當前元素的父元素上 設置的字體大小
????因為具有繼承性，所以可能會導致縮放失控，比如:
????A 祖先元素:12px;
????B 父元素: 120%, 即 12 * 1.2 = 14.4px(可能會取整);
????C 子元素: 135%, 即 14.4 * 1.35 = 19.44px

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

??A2 具有繼承性

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

簡而言之，就是font-size負責的是模具的大小，而不是真正實際字符的大小

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

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

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

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

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

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

S2 特別注意，所有未顯式賦值的font值，都會被瀏覽器自動賦予默認值

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

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

??A2 應用于 塊級元素，無法應用于行內元素&替換元素(如果想要行內元素有縮進效果，可以使用左內邊距/外邊距)

??A3 縮進只應用于一個塊級元素的第一行內容

??A4 具有繼承性

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

??A2 應用于 塊級元素
??A3 具有繼承性

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

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

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

??A2 可以應用于所有元素 (對于塊級元素和內聯元素的區別，詳見其他博文)

??A3 可以繼承
????因為具有繼承性，所以可能會有以下情況: 繼承的div元素的line-height值小于 顯式設置的fz值，導致擁擠
????解決方法是，使用number作為“繼承因子”，這樣各個元素都會根據自己的fz值，來計算line-height值了

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

S2 基線對齊情況
??A1 對行內元素，基線對齊是指：元素的基線與其 父元素的基線 對齊;
??A2 對替換元素，基線對齊是指：元素的底端與其 父元素的基線 對齊 （因為替換元素壓根就沒有基線）
??這就會導致，可能圖像下方會出現一段空白的問題

??A3 百分比/em 對齊情況
????會把 行內元素的基線 /替換元素的底邊，相對于父元素的基線升高/降低數值

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

S4 頂端/底端對齊情況
??A1 對bottom值，指的是： 元素行內框的底部 與其 所屬行框的底部對齊;
??A2 對text-bottom值，指的是: 對行內元素的 行內文本內容區 對齊 + 對替換元素無效

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

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

S1 文本大小寫 轉換屬性 text-transform
??A1 值可以是 uppercase等關鍵字
??A2 應用于 所有元素

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

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

S2 可以實現多重陰影

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

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

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