一、 css字體屬性
瀏覽器支持情況：
二 瘟栖、 屬性詳細說明
1葵擎、font
font 簡寫屬性在一個聲明中設置所有字體屬性。
注釋：此屬性也有第六個值："line-height"慢宗，可設置行間距坪蚁。
說明
- 這個簡寫屬性用于一次設置元素字體的兩個或更多方面。使用 icon 等關(guān)鍵字可以適當?shù)卦O置元素的字體镜沽，使之與用戶計算機環(huán)境中的某個方面一致敏晤。注意，如果沒有使用這些關(guān)鍵詞缅茉，至少要指定字體大小和字體系列嘴脾。
可以按順序設置如下屬性：
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
2、font-style：規(guī)定字體樣式
- normal 默認值蔬墩。瀏覽器顯示一個標準的字體樣式译打。
- italic 瀏覽器會顯示一個斜體的字體樣式。
- oblique 瀏覽器會顯示一個傾斜的字體樣式拇颅。
- inherit 規(guī)定應該從父元素繼承字體樣式奏司。（IE不支持）
3、font-variant ：規(guī)定字體異體
- normal 默認值樟插。瀏覽器會顯示一個標準的字體韵洋。
- small-caps 瀏覽器會顯示小型大寫字母的字體。
- inherit 規(guī)定應該從父元素繼承 font-variant 屬性的值黄锤。
4搪缨、font-weight：規(guī)定字體粗細
- normal 默認值。定義標準的字符鸵熟。
- bold 定義粗體字符副编。
- bolder 定義更粗的字符。
- lighter 定義更細的字符流强。
- 100-900 定義由粗到細的字符痹届。400 等同于 normal，而 700 等同于 bold打月。
- inherit 規(guī)定應該從父元素繼承字體的粗細短纵。
5、font-size：規(guī)定字體尺寸
- xx-small僵控，x-small香到，small，medium，large悠就，x-large千绪，xx-large 把字體的尺寸設置為不同的尺寸，從 xx-small 到 xx-large梗脾。默認值：medium荸型。
- smaller 把 font-size 設置為比父元素更小的尺寸。
- larger 把 font-size 設置為比父元素更大的尺寸炸茧。
- length 把 font-size 設置為一個固定的值瑞妇。
- % 把 font-size 設置為基于父元素的一個百分比值。
- inherit 規(guī)定應該從父元素繼承字體尺寸梭冠。
6 辕狰、line-height：規(guī)定字體行高
- normal 默認。設置合理的行間距控漠。
- number 設置數(shù)字迅腔，此數(shù)字會與當前的字體尺寸相乘來設置行間距扒秸。
- length 設置固定的行間距匹表。
- % 基于當前字體尺寸的百分比行間距辜腺。
- inherit 規(guī)定應該從父元素繼承 line-height 屬性的值。
7碉渡、font-family：規(guī)定字體系列
- family-name/generic-family 用于某個元素的字體族名稱或/及類族名稱的一個優(yōu)先表聚谁。默認值：取決于瀏覽器。
- inherit 規(guī)定應該從父元素繼承字體系列滞诺。
8形导、word-spacing：增加或減少單詞間的空白（即字間隔）。
- normal 默認铭段，定義單詞間的標準空間
- length 定義單詞間的固定空間
- inherit 規(guī)定應該從父元素繼承word-spacing屬性的值
9骤宣、word-break：規(guī)定自動換行的處理方法
- normal 使用瀏覽器默認的換行規(guī)則
- break-all 允許在單詞內(nèi)換行
- keep-all 只能在半角空格或連字符處換行
10秦爆、letter-spacing：增加或減少字符間的空白（字符間距）
- normal 默認序愚。規(guī)定字符間沒有額外的空間
- length 定義字符間的固定空間（允許負值）
- inherit 規(guī)定應該從父元素繼承l(wèi)etter-spacing屬性的值
11、white-space：指定元素內(nèi)的空白怎樣處理
- normal 默認等限“炙保空白會被瀏覽器忽略
- pre 空白會被瀏覽器保留，其行為方式類似Html中的<pre>標簽
- nowrap 文本不會換行望门，文本會在同一行上繼續(xù)形娇，直到遇到
標簽為止 - pre-wrap 保留空白字符序列，但是正常的進行換行
- pre-line 合并空白字符序列筹误，但是保留換行符
- inherit 規(guī)定應該從父元素繼承white-space屬性的值
8桐早、其他
- caption 定義被標題控件（比如按鈕、下拉列表等）使用的字體。
- icon 定義被圖標標記使用的字體哄酝。
- menu 定義被下拉列表使用的字體友存。
- message-box 定義被對話框使用的字體。
- small-caption caption 字體的小型版本陶衅。
- status-bar 定義被窗口狀態(tài)欄使用的字體屡立。
三、font-size相關(guān)內(nèi)容
1搀军、font-size和line-height
4種box
要說的4種盒子分別是inline box膨俐、line box、content area罩句、containing box
inline box (行內(nèi)框) 每個行內(nèi)元素會生成一個行內(nèi)框焚刺，行內(nèi)框是一個瀏覽器渲染模型中的一個概念，無法顯示出來的止，行內(nèi)框的高度等于font-size檩坚，設定line-height時，行內(nèi)框的高度不變诅福，改變的是行距匾委。
line box （行框） 行框是指本行的一個虛擬的矩形框，由該行中行內(nèi)框組成氓润。行框也是瀏覽器渲染模式中的一個概念赂乐，無法顯示出來。行框高度等于本行中所有行內(nèi)框高度的最大值咖气。當有多行內(nèi)容時挨措，每一行都有自己的行框。
content area （內(nèi)容區(qū)） 內(nèi)容區(qū)是圍繞著文字的一種box崩溪，無法顯示出來浅役，其高度取決于font-size和padding。內(nèi)容區(qū)的高度 = font-size + padding-top + padding-bottom
containing box containing box 是包裹著上述三種box的box
2伶唯、font-size和vertical-align
（1）vertical-align可能的值：
- baseline 默認觉既。元素放置在父元素的基線上。
- sub 垂直對齊文本的下標乳幸。
- super 垂直對齊文本的上標
- top 把元素的頂端與行中最高元素的頂端對齊
- text-top 把元素的頂端與父元素字體的頂端對齊
- middle 把此元素放置在父元素的中部瞪讼。
- bottom 把元素的頂端與行中最低的元素的頂端對齊。
- text-bottom 把元素的底端與父元素字體的底端對齊粹断。
- length
- % 使用 "line-height" 屬性的百分比值來排列此元素符欠。允許使用負值。
- inherit 規(guī)定應該從父元素繼承 vertical-align 屬性的值瓶埋。
vertical-align 屬性希柿，它也是計算 line-box 高度的重要因素之一诊沪。我們甚至可以說 vertical-align 是內(nèi)聯(lián)格式化上下文（IFC）中最重要的屬性。
（2）字體的相關(guān)高度計算
- 一款字體會定義一個 em-square曾撤，它是用來盛放字符的金屬容器娄徊。這個 em-square 一般被設定為寬高均為 1000 相對單位，不過也可以是 1024盾戴、2048 相對單位寄锐。
- 字體度量都是基于這個相對單位設置的，包括 ascender尖啡、descender橄仆、capital height、x-height 等衅斩。注意這里面的值是允許相對于 em-square 出血（bleed outside）的（譯者注：大概可以理解為超出 em-square）
- 在瀏覽器中盆顾，上面的 1000 相對單位會按照你需要的 font-size 縮放。
- em-square 是 1000
-
ascender 是 1100畏梆，descender 是 540您宪。通過測試發(fā)現(xiàn)，macOS 上的瀏覽器使用了 HHead Ascent 和 HHead Descent 值奠涌，Windows 上的瀏覽器使用了 Win Ascent 和 Win Descent（而且兩個平臺上的值不一樣）宪巨。我們還看到 Capital Height 是 680，X height 是 485溜畅。
image
這意味著 Catamaran 字體占據(jù)了 1100 + 540 個相對單位捏卓，盡管它的 em-square 只有 1000 個相對單位，所以當我們設置 font-size:100px 時慈格，這個字體里的文字高度是 164px怠晴。這個計算出來的高度決定了 HTML 元素的 content-area（內(nèi)容區(qū)域）你可以認為 content-area 就是 background 作用的區(qū)域。
（3）line-box計算
- 對于內(nèi)聯(lián)元素浴捆，padding 和 border 會增大 background 區(qū)域蒜田，但是不會增大 content-area（不是 line-box 的高度）。一般來說你無法再屏幕上看到 content-area选泻。margin-top 和 margin-bottom 對兩者都沒有影響冲粤。
- 對于可替換內(nèi)聯(lián)元素（replaced inline elements）、inline-block 元素和 blockified 內(nèi)聯(lián)元素滔金，padding色解、margin 和 border 會增大 height（譯者注：注意 margin）茂嗓，因此會影響 content-area 和 line-box 的高度
（4）vertical-align
它的默認值是 baseline餐茵。還記得字體度量里的 ascender 和 descender 嗎？這兩個值決定了 baseline 的位置述吸。很少有字體的 ascender 和 descender 的比例是一比一的忿族，所以我們經(jīng)陈啾浚看到一些意想不到的現(xiàn)象。
<p>
<span>Ba</span>
<span>Ba</span>
</p>
p {
font-family: Catamaran;
font-size: 100px;
line-height: 200px;
}
span:last-child {
font-size: 50px;
}
我們會發(fā)現(xiàn)一個非常奇怪的現(xiàn)象道批，line-box 的高度變高了错英！如下圖所示。提示你一下隆豹，line-box 的高度是從子元素的最高點到最低點椭岩。
用 baseline 來對齊令人費解，如果我們用 vertical-align: middle璃赡，middle 的意思是「用父元素 baseline 高度加上父元素中 x-height 的一半的高度來對齊當前元素的垂直方向的中點」判哥。baseline 所處的高度跟字體有關(guān)，x-height 的高度也跟字體有關(guān)碉考，所以 middle 對齊也不靠譜塌计。更糟糕的是，一般來說侯谁，middle 根本就不是居中對齊锌仅！內(nèi)聯(lián)元素的對齊受太多因素影響，因此不可能用 CSS 實現(xiàn)墙贱。
vertical-align 的其他 4 個值
- vertical-align: top / bottom热芹，表示與 line-box 的頂部或底部對齊
- vertical-align: text-top / text-bottom，表示與 content-area 的頂部或底部對齊
不過你依然要小心惨撇，大部分情況下剿吻，對齊的是 line-height ，也就是一個不可見的高度串纺±雎茫看看下面這個用 vertical-align:top 的例子：
- 所有的內(nèi)聯(lián)元素都有兩個高度：基于字體度量的 content-area，line-height 纺棺，這兩個高度你都無法看到
- line-height: normal 是基于字體度量計算出來的
- line-height: n (n=1,2,3…) 可能得出一個比line-height 還要矮的 content-area
- vertical-align 不靠譜
- line-box 的高度的受其子元素的 line-height 和 vertical-align 的影響
- 我們無法輕易的用 CSS 來控制字體度量
3榄笙、font-size和ex、em祷蝌、rem
- px像素（Pixel）茅撞。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的巨朦。(引自CSS2.0手冊)
- em是相對長度單位米丘。相對于當前對象內(nèi)文本的字體尺寸。如當前對行內(nèi)文本的字體尺寸未被人為設置糊啡，則相對于瀏覽器的默認字體尺寸拄查。(引自CSS2.0手冊)
任意瀏覽器的默認字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px棚蓄。那么12px=0.75em,10px=0.625em堕扶。為了簡化font-size的換算碍脏，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10稍算，然后換上em作為單位就行了典尾。*
px特點
- IE無法調(diào)整那些使用px作為單位的字體大小糊探；
- 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位钾埂；
- Firefox能夠調(diào)整px和em。
em特點
- em的值并不是固定的科平；
- em會繼承父級元素的字體大小勃教。
rem特點
rem是CSS3新增的一個相對單位（root em，根em）匠抗，這個單位引起了廣泛關(guān)注故源。這個單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設定字體大小時汞贸，仍然是相對大小绳军，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身矢腻，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小门驾，又可以避免字體大小逐層復合的連鎖反應。目前多柑，除了IE8及更早版本外奶是，所有瀏覽器均已支持rem。對于不支持它的瀏覽器竣灌，應對方法也很簡單聂沙，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小初嘹。
