字體
網(wǎng)頁中的字體有三個來源:
- 用戶機器中安裝的字體。（直到最近，這些字體還是能在網(wǎng)頁中放心使用的唯一批字體。）
- 保存在第三方網(wǎng)站上的字體。最常見的是Typekit 和Google，可以使用link 標(biāo)簽把它們鏈接到你的頁面上。
- 保存在你的Web 服務(wù)器上的字體。這些字體可以使用@font-face 規(guī)則隨網(wǎng)頁一起發(fā)送給瀏覽器。
以下就是與字體樣式相關(guān)的6 個屬性:
- font-family
- font-size
- font-style
- font-weight
- font-variant
- font（簡寫屬性）
字體族
示例：h2 {font-family:times, serif;}。
font-family 用于設(shè)定元素中的文本使用什么字體。一般來說，應(yīng)該給整個頁面設(shè)定一種主字體，然后只對那些需要使用不同字體的元素再應(yīng)用font-family。要為整個頁面指定字體，可以設(shè)定body 元素的font-family 屬性：
body {font-family:verdana, sans-serif;}
font-family 是可以繼承的屬性，因此它的值會遺傳給所有后代元素。對于body 元素來說，這個字體設(shè)定可以遺傳給標(biāo)記中所有其他元素。
既然字體要么來自用戶機器，要么來自網(wǎng)上，那么就始終存在某種字體不能在某個網(wǎng)頁中使用的可能。正因為如此，設(shè)定字體時要給出一組字體來，這組字體叫字體棧。
用字體棧指定本地字體
用戶機器上的字體是隨操作系統(tǒng)一起安裝的，可以由本地應(yīng)用共享。每種操作系統(tǒng)自帶的字體不多，而且用戶隨時會安裝或刪除字體，因此我們永遠也不敢保證一定能用某種字體來顯示網(wǎng)頁。為此，在指定文本的字體時，需要多列出幾種后備字體，以防第一種字體無效。這個字體的列表也叫字體棧。
簡單地說，如果用戶機器上有相應(yīng)字體，那字體棧能保證用戶以預(yù)期字體來閱讀網(wǎng)頁文本，如果用戶機器上沒有相應(yīng)字體，那么用戶還可以使用另一種效果可以接受的字體閱讀。
body {font-family:"trebuchet ms", tahoma, sans-serif;}
如果字體名像Trebuchet MS 一樣多于一個單詞（有空格），應(yīng)該加上引號。
這里的字體棧相當(dāng)于跟瀏覽器說：“使用Trebuchet MS 字體顯示這個文檔，如果機器里沒有這款字體，那就使用Tahoma 代替，如果這款字體也沒有，那就隨便找一種機器里有的無襯線字體吧。”注意，給font-family 字體棧的最后一項指定一個通用字體類非常重要，比如serif、sans-serif，這是一種最保險的方法。
有哪些通用的字體類呢？有以下5 種：
- serif，也就是襯線字體，在每個字符筆畫的末端會有一些裝飾線；
- sans-serif，也就是無襯線字體，字符筆畫的末端沒有裝飾線；
- monospace，也就是等寬字體，顧名思義，就是每個字符的寬度相等（也稱代碼體）；
- cursive，也就是草書體或手寫體；
- fantasy，不能歸入其他類別的字體（一般都是奇形怪狀的字體）。
字體大小
示例：h2 {font-size:18px;}。
絕對字體大小
使用像素、派卡（pica）或英寸設(shè)定字體大小很簡單，它們是絕對單位，因此設(shè)定多大就多大，與祖先元素的字體大小無關(guān)。使用絕對單位的缺點很明顯，那就是在需要調(diào)整頁面所有元素的字體大小時，必須一個一個地修改樣式表中的font-size，相當(dāng)麻煩。
簡言之，修改body 元素的字體大小，不會影響頁面中以絕對單位控制的元素，但沒有設(shè)定字體大小的元素則會與body 的字體大小成比例變化。相對字體大小
使用百分比、em 或rem（根元素的字體大小）設(shè)定字體大小要復(fù)雜一些。如果你給某個元素設(shè)定了相對字體大小，則該元素的字體大小要相對于最近的“被設(shè)定過字體大小的”祖先元素來確定。
<body>
<p>This is <strong>very important!</strong></p>
</body>
和下面的CSS
p {font-size:.75em;}
strong {font-size:.75em;}
如果你想使用em，但又需要設(shè)定具體的像素大小，可以把body 的font-size 設(shè)定為
62.5%。這樣，就等于把基準(zhǔn)大小從16 像素改為10 像素（16×62.5%=10）。然后，em 與像素的對應(yīng)關(guān)系就十分明確了，比如1em 等于10 像素，1.5em 等于15 像素，2em 等于20 像素，等等。
p 元素的文本為12 像素（body 的16 像素基準(zhǔn)大小×.75＝12），折合成點單位是9 點。strong 是p 的子元素，它的文本是多大呢？相對大小會逐層復(fù)合，strong 的大小應(yīng)該是16 像素×.75×.75＝9 像素。要熟悉相對單位的這種計算方式，需要多實踐。最終你會知道，改變一個元素的相對字體大小，其子元素的字體大小也會同比例變化。
- 關(guān)于rem 單位
CSS3 新增了一個相對單位rem（root em，根em），這個單位引起了廣泛關(guān)注。這個單位與em 有什么區(qū)別呢？區(qū)別在于使用rem 為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML 根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8 及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem 設(shè)定的字體大小。下面就是一個例子：
/*IE8 及之前版本的IE 瀏覽器使用14 像素*/
p {font-size:14px; font-size:.875rem;}
字體樣式
值：italic、oblique、normal。
示例：h2 {font-style:italic;} 。
font-style 設(shè)定字體是斜體，還是正體。用oblique 代替italic 的結(jié)果也一樣。
換句話說，font-style 的作用僅僅是通過italic 把正體設(shè)為斜體，或者通過normal把斜體設(shè)為正體。
字體粗細(xì)
可能的值：100、200……900，或者lighter、normal、bold 和bolder。
示例：a {font-weight:bold;}。
字體變化
值：small-caps、normal。
示例：blockquote {font-variant:small-caps;}。
font-variant 屬性除了normal，就只有一個值，即small-caps。這個值會導(dǎo)致所有小寫英文字母變成小型大寫字母：
文本屬性
以下是幾個最有用的CSS 文本屬性：
- text-indent
- letter-spacing
- word-spacing
- text-decoration
- text-align
- line-height
- text-transform
- vertical-align
文本縮進
值：長度值（正、負(fù)均可）。
示例：p {text-indent:3em;}。
繼承的值與計算的值
這里有一個非常重要的問題，必須請讀者注意：text-indent 是可以被子元素繼承的。如果你在一個div 上設(shè)定了text-indent 屬性，那么div 中的所有段落都會繼承該縮進值。然而，與所有繼承的CSS 值一樣，這個縮進值并不是祖先元素中設(shè)定的值，而是計算的值。下面舉一個例子說明。
假設(shè)有一個400 像素寬的div，包含的文本縮進5%，則縮進的距離是20 像素（400 的5%）。在這個div 中有一個200 像素寬的段落。作為子元素，它繼承父元素的text-indent 值，所以它包含的文本也縮進。但繼承的縮進值是多少呢？不是5%，而是20 像素。也就是說，子元素繼承的是根據(jù)父元素寬度計算得到的縮進值。結(jié)果，雖然段落只有父元素一半寬，但其中的文本也會縮進20 像素。這樣可以確保無論段落多寬，它們的縮進距離都一樣。當(dāng)然，在子元素上重新設(shè)定text-indent 屬性，可以覆蓋繼承的值。
字符間距
值：任何長度值（正、負(fù)值均可）。
示例：p {letter-spacing:.2em;}。
letter-spacing 為正值時增大字符間距，為負(fù)值時縮小間距。無論設(shè)定字體大小時使用的是什么單位，設(shè)定字符間距一定要用相對單位，以便字間距能隨字體大小同比例變化。
單詞間距
值：任何長度值（正、負(fù)值均可）。
示例：p {word-spacing:.2em;}。
單詞間距與字符間距非常相似，區(qū)別在于它只調(diào)整單詞間距，而不影響字符間距。CSS 把任何兩邊有空白的字符和字符串都視作“單詞”。
文本裝飾
值：underline、overline、line-through、blink、none。
示例：.retailprice {text-decoration:line-through;}。
nav a {text-decoration:none;}
a:hover {text-decoration:underline;}
文本對齊
值：left、right、center、justify。
示例：p {text-align:right;}。
text-align 屬性只有4 個值，left、right、center 和justify，控制著文本在水平方向?qū)R的方式。其中，center 值也可以用來在較大的元素中居中較小的固定寬度的元素或圖片。
行高
值：任何數(shù)字值（不用指定單位）。
示例：p {line-height:1.5;}。
修改默認(rèn)行高最簡單的方式就是使用font 快捷屬性，以復(fù)合值的形式把font-size 和line-height 值寫在一塊，比如：
div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}
就這個例子來說，行高就是字體大小1.2em 的1.4 倍。注意這里不用給line-height值指定單位，只要一個數(shù)值就可以。此時，瀏覽器會用計算得到的1.2em 的像素數(shù)乘以1.4，結(jié)果就是行高。如果后來你把字體大小增大到1.5em，則行高仍然是1.5em計算值的1.4 倍。在設(shè)定行高時如果使用了絕對單位（如像素），那將來增大字體有可能導(dǎo)致行與行之間重疊。
文本轉(zhuǎn)換
值：none、uppercase、lowercase、capitalize。
示例：p {text-transform:capitalize;}。
text-transform 屬性用于轉(zhuǎn)換元素中文本的大小寫，它可以設(shè)定英文文本首字母大寫、全部字母大寫和全部字母小寫。
垂直對齊
值：任意長度值以及sub、super、top、middle、bottom 等。
示例：span {vertical-align:60%;}。
vertical-align 以基線為參照上下移動文本，但這個屬性只影響行內(nèi)元素。如果你想在垂直方向上對齊塊級元素，必須把其display 屬性設(shè)定為inline。vertical-align屬性最常用于公式或化學(xué)分子式中的上標(biāo)和下標(biāo)，比如x4-y-5 或N3O，或者用于文本中腳注的角標(biāo)，比如把星號變成上角標(biāo)。
Web 字體大揭秘
@font-face 規(guī)則為設(shè)計師提供了系統(tǒng)自帶字體以外的廣泛選擇。換句話說，瀏覽器可以從Web 服務(wù)器下載字體，就意味著不必再依賴用戶機器中的字體，而且也可以確保用戶能夠看到CSS 中設(shè)定的字體。
設(shè)定Web 字體的方式有以下三種。
- 使用Google Web Fonts 或Adobe 的Typekit 等公共字體庫。
- 使用事先打好包的@font-face 包。
- 使用Font Squirrel 用你自己的字體生成@font-face 包。
公共字體庫
Google Web Fonts 和Adobe 的Typekit 是目前最大的兩個在線公共字體庫，前者托管著大約500 多類字體，后者包含739 個字體族，以訂購方式提供訪問。比如下面這個<link>標(biāo)簽就引用了Anton、Niconne 和Prata 字體。
<link
rel='stylesheet' type='text/css'>
把這個鏈接添加到頁面的<head>標(biāo)簽中之后，就可以像使用其他字體一樣使用這些Web 字體了。
打包的@font-face包
在網(wǎng)頁中嵌入字體的第二種方式是使用@font-face 規(guī)則，前提是可以從你的網(wǎng)站或第三方Web 服務(wù)器下載到相應(yīng)的字體。以這種方式提供的字體，會在使用該字體的頁面第一次加載時被瀏覽器下載并緩存起來，以后就不用下載了。但是，除了顯示網(wǎng)頁之外，用戶不能將這種字體用于其他用途。
使用@font-face 的一個問題是不同瀏覽器要求的字體格式不一樣。比如，F(xiàn)irefox、Webkit 核心的瀏覽器（Safari 和Chrome），以及iOS 4.1 版之后的移動Safari 使用OTF（OpenType）或TTF（TrueType）字體。Internet Explorer 使用EOT（Embedded OpenType）。另外，iOS 4.1 之前版本中的移動Safari 以及其他瀏覽器使用SVG（Scalable Vector Graphics）格式。雖然字體格式不同，但它們往往以現(xiàn)成的字體包的形式存在，或者可以使用本地字體來生成字體包（提醒你一下，自己生成字體包首先要獲得許可）。
Font Squirrel（http://www.fontsquirrel.com）提供了很多現(xiàn)成的字體包，每個字體包中都包含所有必要格式的字體和為每款瀏覽器提供正確格式的CSS 代碼。Font Squirrel還有一個轉(zhuǎn)換程序，能夠把你上傳的字體轉(zhuǎn)換成字體包。
下面就是Font Squirrel 為Ubuntu Titling Bold 字體生成的@font-face 代碼。對于其他來源的字體，這種格式也是適用的。
@font-face {
/*這就是將來在字體棧中引用的字體族的名字*/
font-family:'UbuntuTitlingBold';
src: url('UbuntuTitling-Bold-webfont.eot');
src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
format('embedded-opentype'),
url('UbuntuTitling-Bold-webfont.woff')
format('woff'),
url('UbuntuTitling-Bold-webfont.ttf')
format('truetype'),
url('UbuntuTitling-Bold-webfont.
svg#UbuntuTitlingBold') format('svg');
font-weight: normal;
font-style: normal;
}
把以上代碼添加到網(wǎng)頁中之后，就可以使用font-family 以常規(guī)方式引用該字體了。引用字體時要使用@font-face 規(guī)則中font-family 屬性的值作為字體族的名字。
生成@font-face包
有時候，你可能希望在自己的網(wǎng)頁中使用一種特殊字體，比如客戶自己公司指定了一種字體，必須用在網(wǎng)站和設(shè)計中。今天，只要你獲得了把該字體轉(zhuǎn)換為Web 字體使用的授權(quán)（請查看許可協(xié)議或聯(lián)系字體設(shè)計商），就可以使用Font Squirrel 的轉(zhuǎn)換程序（http://www.fontsquirrel.com/fontface/generator）把它轉(zhuǎn)換成@font-face 字體包。只要簡單幾步，幾分鐘時間，就可以得到一個能放到你自己Web 服務(wù)器上供下載的@font-face 字體包。
