字體
網(wǎng)頁(yè)中的字體有三個(gè)來源:
- 用戶機(jī)器中安裝的字體。（直到最近，這些字體還是能在網(wǎng)頁(yè)中放心使用的唯一批字體止喷。）
- 保存在第三方網(wǎng)站上的字體。最常見的是Typekit 和Google混聊，可以使用link 標(biāo)簽把它們鏈接到你的頁(yè)面上。
- 保存在你的Web 服務(wù)器上的字體乾巧。這些字體可以使用@font-face 規(guī)則隨網(wǎng)頁(yè)一起發(fā)送給瀏覽器句喜。
以下就是與字體樣式相關(guān)的6 個(gè)屬性:
- font-family
- font-size
- font-style
- font-weight
- font-variant
- font（簡(jiǎn)寫屬性）
字體族
示例：h2 {font-family:times, serif;}。
font-family 用于設(shè)定元素中的文本使用什么字體沟于。一般來說咳胃，應(yīng)該給整個(gè)頁(yè)面設(shè)定一種主字體，然后只對(duì)那些需要使用不同字體的元素再應(yīng)用font-family旷太。要為整個(gè)頁(yè)面指定字體展懈，可以設(shè)定body 元素的font-family 屬性：
body {font-family:verdana, sans-serif;}
font-family 是可以繼承的屬性，因此它的值會(huì)遺傳給所有后代元素供璧。對(duì)于body 元素來說存崖，這個(gè)字體設(shè)定可以遺傳給標(biāo)記中所有其他元素。
既然字體要么來自用戶機(jī)器睡毒，要么來自網(wǎng)上来惧，那么就始終存在某種字體不能在某個(gè)網(wǎng)頁(yè)中使用的可能。正因?yàn)槿绱搜莨耍O(shè)定字體時(shí)要給出一組字體來供搀，這組字體叫字體棧。
用字體棧指定本地字體
用戶機(jī)器上的字體是隨操作系統(tǒng)一起安裝的钠至，可以由本地應(yīng)用共享麦射。每種操作系統(tǒng)自帶的字體不多儒恋，而且用戶隨時(shí)會(huì)安裝或刪除字體，因此我們永遠(yuǎn)也不敢保證一定能用某種字體來顯示網(wǎng)頁(yè)。為此寨躁，在指定文本的字體時(shí)详民，需要多列出幾種后備字體，以防第一種字體無效。這個(gè)字體的列表也叫字體棧赞季。
簡(jiǎn)單地說，如果用戶機(jī)器上有相應(yīng)字體奢驯，那字體棧能保證用戶以預(yù)期字體來閱讀網(wǎng)頁(yè)文本申钩，如果用戶機(jī)器上沒有相應(yīng)字體，那么用戶還可以使用另一種效果可以接受的字體閱讀瘪阁。
body {font-family:"trebuchet ms", tahoma, sans-serif;}
如果字體名像Trebuchet MS 一樣多于一個(gè)單詞（有空格）撒遣，應(yīng)該加上引號(hào)。
這里的字體棧相當(dāng)于跟瀏覽器說：“使用Trebuchet MS 字體顯示這個(gè)文檔管跺，如果機(jī)器里沒有這款字體义黎，那就使用Tahoma 代替，如果這款字體也沒有豁跑，那就隨便找一種機(jī)器里有的無襯線字體吧廉涕。”注意艇拍，給font-family 字體棧的最后一項(xiàng)指定一個(gè)通用字體類非常重要狐蜕，比如serif、sans-serif卸夕，這是一種最保險(xiǎn)的方法层释。
有哪些通用的字體類呢？有以下5 種：
- serif快集，也就是襯線字體贡羔，在每個(gè)字符筆畫的末端會(huì)有一些裝飾線；
- sans-serif个初，也就是無襯線字體乖寒，字符筆畫的末端沒有裝飾線；
- monospace勃黍，也就是等寬字體宵统，顧名思義，就是每個(gè)字符的寬度相等（也稱代碼體）覆获；
- cursive马澈，也就是草書體或手寫體；
- fantasy弄息，不能歸入其他類別的字體（一般都是奇形怪狀的字體）痊班。
字體大小
示例：h2 {font-size:18px;}。
絕對(duì)字體大小
使用像素摹量、派卡（pica）或英寸設(shè)定字體大小很簡(jiǎn)單涤伐，它們是絕對(duì)單位馒胆，因此設(shè)定多大就多大，與祖先元素的字體大小無關(guān)凝果。使用絕對(duì)單位的缺點(diǎn)很明顯祝迂，那就是在需要調(diào)整頁(yè)面所有元素的字體大小時(shí)，必須一個(gè)一個(gè)地修改樣式表中的font-size器净，相當(dāng)麻煩型雳。
簡(jiǎn)言之，修改body 元素的字體大小山害，不會(huì)影響頁(yè)面中以絕對(duì)單位控制的元素纠俭，但沒有設(shè)定字體大小的元素則會(huì)與body 的字體大小成比例變化。相對(duì)字體大小
使用百分比浪慌、em 或rem（根元素的字體大性┚！）設(shè)定字體大小要復(fù)雜一些。如果你給某個(gè)元素設(shè)定了相對(duì)字體大小权纤，則該元素的字體大小要相對(duì)于最近的“被設(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 與像素的對(duì)應(yīng)關(guān)系就十分明確了拴魄，比如1em 等于10 像素冗茸，1.5em 等于15 像素，2em 等于20 像素匹中，等等夏漱。
p 元素的文本為12 像素（body 的16 像素基準(zhǔn)大小×.75＝12），折合成點(diǎn)單位是9 點(diǎn)顶捷。strong 是p 的子元素挂绰，它的文本是多大呢？相對(duì)大小會(huì)逐層復(fù)合服赎，strong 的大小應(yīng)該是16 像素×.75×.75＝9 像素葵蒂。要熟悉相對(duì)單位的這種計(jì)算方式，需要多實(shí)踐重虑。最終你會(huì)知道践付，改變一個(gè)元素的相對(duì)字體大小，其子元素的字體大小也會(huì)同比例變化缺厉。
- 關(guān)于rem 單位
CSS3 新增了一個(gè)相對(duì)單位rem（root em永高，根em）隧土，這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em 有什么區(qū)別呢命爬？區(qū)別在于使用rem 為元素設(shè)定字體大小時(shí)曹傀，仍然是相對(duì)大小，但相對(duì)的只是HTML 根元素饲宛。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身皆愉，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)落萎。目前亥啦，除了IE8 及更早版本外，所有瀏覽器均已支持rem练链。對(duì)于不支持它的瀏覽器翔脱，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明媒鼓。這些瀏覽器會(huì)忽略用rem 設(shè)定的字體大小届吁。下面就是一個(gè)例子：
/*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羡玛，就只有一個(gè)值形入，即small-caps。這個(gè)值會(huì)導(dǎo)致所有小寫英文字母變成小型大寫字母：
文本屬性
以下是幾個(gè)最有用的CSS 文本屬性：
- text-indent
- letter-spacing
- word-spacing
- text-decoration
- text-align
- line-height
- text-transform
- vertical-align
文本縮進(jìn)
值：長(zhǎng)度值（正缝左、負(fù)均可）亿遂。
示例：p {text-indent:3em;}浓若。
繼承的值與計(jì)算的值
這里有一個(gè)非常重要的問題，必須請(qǐng)讀者注意：text-indent 是可以被子元素繼承的蛇数。如果你在一個(gè)div 上設(shè)定了text-indent 屬性挪钓，那么div 中的所有段落都會(huì)繼承該縮進(jìn)值。然而耳舅，與所有繼承的CSS 值一樣碌上，這個(gè)縮進(jìn)值并不是祖先元素中設(shè)定的值，而是計(jì)算的值浦徊。下面舉一個(gè)例子說明馏予。
假設(shè)有一個(gè)400 像素寬的div，包含的文本縮進(jìn)5%盔性，則縮進(jìn)的距離是20 像素（400 的5%）霞丧。在這個(gè)div 中有一個(gè)200 像素寬的段落。作為子元素冕香，它繼承父元素的text-indent 值蛹尝，所以它包含的文本也縮進(jìn)。但繼承的縮進(jìn)值是多少呢悉尾？不是5%突那，而是20 像素。也就是說构眯，子元素繼承的是根據(jù)父元素寬度計(jì)算得到的縮進(jìn)值愕难。結(jié)果，雖然段落只有父元素一半寬惫霸，但其中的文本也會(huì)縮進(jìn)20 像素务漩。這樣可以確保無論段落多寬，它們的縮進(jìn)距離都一樣它褪。當(dāng)然，在子元素上重新設(shè)定text-indent 屬性翘悉，可以覆蓋繼承的值茫打。
字符間距
值：任何長(zhǎng)度值（正、負(fù)值均可）妖混。
示例：p {letter-spacing:.2em;}老赤。
letter-spacing 為正值時(shí)增大字符間距，為負(fù)值時(shí)縮小間距制市。無論設(shè)定字體大小時(shí)使用的是什么單位抬旺，設(shè)定字符間距一定要用相對(duì)單位，以便字間距能隨字體大小同比例變化祥楣。
單詞間距
值：任何長(zhǎng)度值（正开财、負(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;}
文本對(duì)齊
值：left鸠天、right、center孵坚、justify粮宛。
示例：p {text-align:right;}。
text-align 屬性只有4 個(gè)值卖宠，left巍杈、right、center 和justify扛伍，控制著文本在水平方向?qū)R的方式筷畦。其中，center 值也可以用來在較大的元素中居中較小的固定寬度的元素或圖片刺洒。
行高
值：任何數(shù)字值（不用指定單位）鳖宾。
示例：p {line-height:1.5;}。
修改默認(rèn)行高最簡(jiǎn)單的方式就是使用font 快捷屬性逆航，以復(fù)合值的形式把font-size 和line-height 值寫在一塊鼎文，比如：
div#intro {font:1.2em/1.4 helvetica, arial, sans-serif;}
就這個(gè)例子來說，行高就是字體大小1.2em 的1.4 倍因俐。注意這里不用給line-height值指定單位拇惋，只要一個(gè)數(shù)值就可以。此時(shí)抹剩，瀏覽器會(huì)用計(jì)算得到的1.2em 的像素?cái)?shù)乘以1.4撑帖，結(jié)果就是行高。如果后來你把字體大小增大到1.5em澳眷，則行高仍然是1.5em計(jì)算值的1.4 倍胡嘿。在設(shè)定行高時(shí)如果使用了絕對(duì)單位（如像素），那將來增大字體有可能導(dǎo)致行與行之間重疊钳踊。
文本轉(zhuǎn)換
值：none衷敌、uppercase勿侯、lowercase、capitalize逢享。
示例：p {text-transform:capitalize;}罐监。
text-transform 屬性用于轉(zhuǎn)換元素中文本的大小寫，它可以設(shè)定英文文本首字母大寫瞒爬、全部字母大寫和全部字母小寫弓柱。
垂直對(duì)齊
值：任意長(zhǎng)度值以及sub、super侧但、top矢空、middle、bottom 等禀横。
示例：span {vertical-align:60%;}屁药。
vertical-align 以基線為參照上下移動(dòng)文本，但這個(gè)屬性只影響行內(nèi)元素柏锄。如果你想在垂直方向上對(duì)齊塊級(jí)元素酿箭，必須把其display 屬性設(shè)定為inline。vertical-align屬性最常用于公式或化學(xué)分子式中的上標(biāo)和下標(biāo)趾娃，比如x4-y-5 或N3O缭嫡，或者用于文本中腳注的角標(biāo)，比如把星號(hào)變成上角標(biāo)抬闷。
Web 字體大揭秘
@font-face 規(guī)則為設(shè)計(jì)師提供了系統(tǒng)自帶字體以外的廣泛選擇妇蛀。換句話說，瀏覽器可以從Web 服務(wù)器下載字體笤成，就意味著不必再依賴用戶機(jī)器中的字體评架，而且也可以確保用戶能夠看到CSS 中設(shè)定的字體。
設(shè)定Web 字體的方式有以下三種炕泳。
- 使用Google Web Fonts 或Adobe 的Typekit 等公共字體庫(kù)纵诞。
- 使用事先打好包的@font-face 包。
- 使用Font Squirrel 用你自己的字體生成@font-face 包培遵。
公共字體庫(kù)
Google Web Fonts 和Adobe 的Typekit 是目前最大的兩個(gè)在線公共字體庫(kù)浙芙，前者托管著大約500 多類字體，后者包含739 個(gè)字體族荤懂，以訂購(gòu)方式提供訪問。比如下面這個(gè)<link>標(biāo)簽就引用了Anton塘砸、Niconne 和Prata 字體节仿。
<link
rel='stylesheet' type='text/css'>
把這個(gè)鏈接添加到頁(yè)面的<head>標(biāo)簽中之后，就可以像使用其他字體一樣使用這些Web 字體了掉蔬。
打包的@font-face包
在網(wǎng)頁(yè)中嵌入字體的第二種方式是使用@font-face 規(guī)則廊宪，前提是可以從你的網(wǎng)站或第三方Web 服務(wù)器下載到相應(yīng)的字體矾瘾。以這種方式提供的字體，會(huì)在使用該字體的頁(yè)面第一次加載時(shí)被瀏覽器下載并緩存起來箭启，以后就不用下載了壕翩。但是，除了顯示網(wǎng)頁(yè)之外傅寡，用戶不能將這種字體用于其他用途放妈。
使用@font-face 的一個(gè)問題是不同瀏覽器要求的字體格式不一樣。比如荐操，F(xiàn)irefox芜抒、Webkit 核心的瀏覽器（Safari 和Chrome），以及iOS 4.1 版之后的移動(dòng)Safari 使用OTF（OpenType）或TTF（TrueType）字體托启。Internet Explorer 使用EOT（Embedded OpenType）宅倒。另外，iOS 4.1 之前版本中的移動(dòng)Safari 以及其他瀏覽器使用SVG（Scalable Vector Graphics）格式屯耸。雖然字體格式不同拐迁，但它們往往以現(xiàn)成的字體包的形式存在，或者可以使用本地字體來生成字體包（提醒你一下疗绣，自己生成字體包首先要獲得許可）线召。
Font Squirrel（http://www.fontsquirrel.com）提供了很多現(xiàn)成的字體包，每個(gè)字體包中都包含所有必要格式的字體和為每款瀏覽器提供正確格式的CSS 代碼持痰。Font Squirrel還有一個(gè)轉(zhuǎn)換程序灶搜，能夠把你上傳的字體轉(zhuǎn)換成字體包。
下面就是Font Squirrel 為Ubuntu Titling Bold 字體生成的@font-face 代碼工窍。對(duì)于其他來源的字體割卖，這種格式也是適用的。
@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)頁(yè)中之后患雏，就可以使用font-family 以常規(guī)方式引用該字體了鹏溯。引用字體時(shí)要使用@font-face 規(guī)則中font-family 屬性的值作為字體族的名字。
生成@font-face包
有時(shí)候淹仑，你可能希望在自己的網(wǎng)頁(yè)中使用一種特殊字體丙挽，比如客戶自己公司指定了一種字體，必須用在網(wǎng)站和設(shè)計(jì)中匀借。今天颜阐，只要你獲得了把該字體轉(zhuǎn)換為Web 字體使用的授權(quán)（請(qǐng)查看許可協(xié)議或聯(lián)系字體設(shè)計(jì)商），就可以使用Font Squirrel 的轉(zhuǎn)換程序（http://www.fontsquirrel.com/fontface/generator）把它轉(zhuǎn)換成@font-face 字體包吓肋。只要簡(jiǎn)單幾步凳怨，幾分鐘時(shí)間，就可以得到一個(gè)能放到你自己Web 服務(wù)器上供下載的@font-face 字體包。
