CSS字體及文本樣式

字體和文本

字體是「文字的不一樣體式」或者「字的形體結構」。對於英文而言，每種字體都是由一組具備獨特樣式的字母、數字和符號組成的

字體屬性主要描述一類字體的大小和外觀。好比，使用什麼字體族（是Times，仍是Helvitica），多大字號，粗體仍是斜體。文本屬性描述對文本的處理方式。好比，行高或者字符間距多大，有沒有下劃線和縮進等

1. 網頁中字體來源

1. 用戶機器中安裝的字體
2. 保存在第三方網站上的字體。最多見的是Typekit 和Google，可使用link 標籤把它們連接到你的頁面上
3. 保存在你的Web 服務器上的字體。這些字體可使用@font-face 規則隨網頁一塊兒發送給瀏覽器

2. 通用的字體類
serif　　　　　　襯線字體，在每一個字符筆畫的末端會有一些裝飾線
sans-serif　　　無襯線字體，字符筆畫的末端沒有裝飾線
monospace　　 等寬字體，顧名思義，就是每一個字符的寬度相等（也稱代碼體）
cursive　　　　  草書體或手寫體
fantasy　　　　不能納入其餘類別的字體（通常都是奇形怪狀的字體）

每一類字體能夠分紅不一樣的字體族（font family），好比Times 和Helvetica。而字體族中又能夠包含不一樣的字型（font face），反映了相應字體族基本設計的不一樣變化

3. 經常使用的字體棧

Verdana 的後備用Tahoma 最好，因它們的「x 高度」相同。

verdana, tahoma, sans-serif

若是想設定一個相對輕爽一點的無襯線字體，可使用這個字體棧

helvetica, arial, sans-serif

字體大小

1. 絕對字體大小

 

使用像素、派卡（pica）或英寸設定字體大小很簡單，它們是絕對單位，所以設定多大就多大，與祖先元素的字體大小無關

設定絕對字體大小時，也可使用關鍵字值，好比x-small、medium、x-large(http://css-discuss.incutio.com/wiki/Using_Keywords)

 

2. 相對字體大小

使用百分比、em 或rem（根元素的字體大小）設定字體大小要複雜一些。若是你給某個元素設定了相對字體大小，則該元素的字體大小要相對於最近的「被設定過字體大小的」祖先元素來肯定。

頁面基準大小爲16px, 若是你想使用em，但又須要設定具體的像素大小，能夠把body 的font-size 設定爲62.5%。這樣，就等於把基準大小從16 像素改成10 像素（16×62.5%=10）

body{ font-size: 62.5%}

CSS3 新增了一個相對單位rem（root em，根em），這個單位引發了普遍關注。這個單位與em 有什麼區別呢？區別在於使用rem 爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML 根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8 及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem 設定的字體大小

小型大寫字母

h3 {font-variant:small-caps;}

Welcome to This Session

 常常將small-caps 用於::first-line 僞元素

簡寫字體屬性

p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}

font 屬性是一個簡寫形式，經過它只要一條CSS 聲明就能夠設定全部字體屬性。不過，使用這個簡寫形式要遵照兩條規則，不然瀏覽器沒法正確解釋聲明的值。
規則一：必須聲明font-size 和font-family 的值。
規則二：全部值必須按以下順序聲明。
1. font-weight、font-style、font-variant 不分前後；
2. 而後是font-size；
3. 最後是font-family。
實際上，在設定font-size 屬性的同時，能夠順便設定line-height（行高）值。也就是說，字體大小和行高的值能夠寫在一塊，好比12px/1.5

行高  http://www.ituring.com.cn/article/18076

CSS 中的行高平均分佈在一行文本的上方和下方。舉個例子，若是字體大小是12 像素，行高是20 像素，則瀏覽器會在文本上方和下方各加4 像素的空白，以湊足20像素的行高。
對於相似標題的一行文原本說，line-height 增長的空白就像外邊距同樣，較大的標題（如h1 和h2）每每有較大的默認行高。

這一點應該記住，由於有時候即便把外邊距和內邊距全去掉，標題上下仍然會有空白。若是想把這些空白也去掉，那就只能把文本的行高設定爲比字體高度（就是字體大小）還要小，好比設定爲小於1 的值

垂直對齊

vertical-align 以基線爲參照上下移動文本，但這個屬性隻影響行內元素。若是你想在垂直方向上對齊塊級元素，必須把其display 屬性設定爲inline

p.custom sub {font-size:60%; vertical-align:-.4em;}
p.custom sup {font-size:65%; vertical-align:.65em;}
p.customsmall {font-size:.8em; vertical-align:1em;}

 

在網頁中嵌入字體的第二種方式是使用@font-face 規則，前提是能夠從你的網站或第三方Web 服務器下載到相應的字體。以這種方式提供的字體，會在使用該字體的頁面第一次加載時被瀏覽器下載並緩存起來，之後就不用下載了

使用@font-face 的一個問題是不一樣瀏覽器要求的字體格式不同。好比，Firefox、Webkit 核心的瀏覽器（Safari 和Chrome），以及iOS 4.1 版以後的移動Safari 使用OTF（OpenType）或TTF（TrueType）字體。Internet Explorer 使用EOT（EmbeddedOpenType）。另外，iOS 4.1 以前版本中的移動Safari 以及其餘瀏覽器使用SVG（Scalable Vector Graphics）格式

 http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

 首字下沉效果

h1 + p::first-letter {
font-family:times, serif;
font-size: 90px;
float:left;
line-height:.65; /*咱們把line-height 設定爲小於1 的值，以便元素盒子牢牢包住首字*/
border:1px solid;
}