CSS字體在Web瀏覽器中的應(yīng)用
混亂的字體命名問題
設(shè)置字體屬性是樣式表的最常見的用途之一。不過，盡管字體選擇很重要，但是目前還沒有一種辦法能確保在 Web 上一致地使用字體，因?yàn)闆]有一種統(tǒng)一描述字體和字體的變形的方法。
例如，字體 Times、Times New Roman 和 TimesNR 可能很類似，甚至完全相同，不過用戶代理怎么能知道這一點(diǎn)呢？創(chuàng)作人員可能在一個(gè)文檔中指定字體為 TimesNR，但是如果用戶機(jī)器上沒有安裝這種字體，用戶查看文檔會(huì)看到什么呢？即使安裝了 Times New Roman，用戶代理也不知道這兩個(gè)字體（Times New Roman 和 TimesNR）實(shí)際上是可以互換的。如果你希望一個(gè)瀏覽器上一定采用某種字體，請(qǐng)別妄想了。
與文字處理軟件相比，CSS 對(duì)字體并沒有提供更多的最終控制；比如加載你創(chuàng)建的一個(gè) Microsoft Office 文檔時(shí)，其顯示可能取決于他已經(jīng)安裝的字體。如果他安裝的字體與你的字體不同，那么文檔看上去會(huì)大不相同。使用 CSS 設(shè)計(jì)的文檔也是如此。
涉及到各種繁雜的字體變形時(shí)，如粗體或斜體文本，字體命名的問題就更是混亂。大多數(shù)人都知道，斜體文本看上去很像，但是很少有人能解釋它與傾斜文本有什么區(qū)別，甚至不知道二者之間存在區(qū)別。
Slanted 并不是斜體風(fēng)格（italic-style）文本的唯一別名，例如，你可能還會(huì)看到 oblique、incline（或 inclined）、cursive 和 kursiv 等待字眼。因此，一種字體可能有一個(gè) TimesItalic 變形，而另一種字體可能使用 GeorgiaOblique 作為變形。盡管這兩種字體實(shí)際上就相當(dāng)于 Times 和 Georgia 字體的“斜體形式”，但是它們的“稱呼”有很大的不同。類似地，字體變形詞 bold、black 和 heavy 可能表示同一個(gè)意思，也可能不同。
通用字體系列
前面討論過，實(shí)際上相同的字體可能有很多不同的稱呼，不過 CSS 邁出了勇敢的一步，力圖幫助用戶代理把這種混亂狀況理清楚。
我們所認(rèn)為的“字體”可能有許多字體變形組成，分別用來描述粗體、斜體文本，等等。例如，你可能已經(jīng)對(duì)字體 Times 很熟悉。不過，Times 實(shí)際上是多種變形的一個(gè)組合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、 TimesBoldOblique，等等。Times 的每種變形都是一個(gè)具體的字體風(fēng)格（font face），而我們通常認(rèn)為的 Times 是所有這些變形字體的一個(gè)組合。換句話說，Times 實(shí)際上是一個(gè)字體系列（font family），而不只是單個(gè)的字體，盡管我們大多數(shù)人都認(rèn)為字體就是某一種字體。
除了各種特定字體系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 還定義了 5 種通用字體系列：
Serif 字體
這些字體成比例，而且有上下短線。如果字體中的所有字符根據(jù)其不同大小有不同的寬度，則成該字符是成比例的。例如，小寫 i 和小寫 m 的寬度就不同。上下短線是每個(gè)字符筆劃末端的裝飾，比如小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線。Serif 字體的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif 字體
這些字體是成比例的，而且沒有上下短線。Sans-serif 字體的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace 字體
Monospace 字體并不是成比例的。它們通常用于模擬打字機(jī)打出的文本、老式點(diǎn)陣打印機(jī)的輸出，甚至更老式的視頻顯示終端。采用這些字體，每個(gè)字符的寬度都必須完全相 同，所以小寫的 i 和小寫的 m 有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個(gè)字體的字符寬度完全相同，則歸類為 Monospace 字體，而不論是否有上下短線。Monospace 字體的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字體
這些字體試圖模仿人的手寫體。通常，它們主要由曲線和 Serif 字體中沒有的筆劃裝飾組成。例如，大寫 A 再其左腿底部可能有一個(gè)小彎，或者完全由花體部分和小的彎曲部分組成。Cursive 字體的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字體
這些字體無法用任何特征來定義，只有一點(diǎn)是確定的，那就是我們無法很容易地將其規(guī)劃到任何一種其他的字體系列當(dāng)中。這樣的字體包括 Western、Woodblock 和 Klingon。
理論上講，用戶安裝的任何字體系列都會(huì)落入到上述某種通用系列中，但實(shí)際上可能并非如此，不過例外情況（如果有的話）往往很少。
字體在Web瀏覽器當(dāng)中的使用
CSS當(dāng)中定義字體類型的屬性是：font-family；
語法：{font-family:字體1,字體2,字體3,...}
作用：調(diào)用客戶端字體
說明：
當(dāng)指定多種字體時(shí)，用“，”分隔每種字體名稱。
當(dāng)字體名稱包含兩個(gè)以上分開的單詞時(shí)，用“”把該字體名稱括起來。
當(dāng)樣式規(guī)則外已經(jīng)有“”時(shí)，用‘’代替“”。
注意：如 果在font-family后加上多種字體的名稱，瀏覽器會(huì)按字體名稱的順序逐一在用戶的計(jì)算機(jī)里尋找已經(jīng)安裝的字體，一旦遇到與要求的相匹配的字體，就 按這種字體顯示網(wǎng)頁內(nèi)容，并停止搜索；如果不匹配就繼續(xù)搜索，直到找到為止，萬一樣式表里的所有字體都沒有安裝的話，瀏覽器就會(huì)用自己默認(rèn)的字體來替代顯 示網(wǎng)頁的內(nèi)容。
以下是小編自己做的一個(gè)測試頁面，小編發(fā)現(xiàn)，這幾種字體類型，并不是所有瀏覽器都認(rèn)識(shí)的，兼容的最好的應(yīng)該是IE，其他的類似于Firefox、Chrome、Safari、360、Opera等都兼容的不是很好。
Code:
<html>
<head>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:18px;line-height:22px;}
h1{ font-size:20px; color:#f00;line-height:32px; }
h3{ font-size:18px; color:#fa0;line-height:28px;}
.warp{ width:660px; margin:0 auto; padding-top:20px;}
.f_l{ float:left;}
.f_r{ float:right;}
.w_320{ width:320px;}
.clearfix:after { visibility: hidden;display: block; content: " ";clear: both;height: 0; }.clearfix{*zoom:1;}
</style>
</head>
<body>
<div class="warp clearfix">
<div class="f_l w_320">
<h1>常用字體樣式</h1>
<p style="font-family:SimSun,sans-serif">SimSun 宋體無襯線</p>
<p style="font-family:SimSun,serif">SimSun 宋體有襯線</p>
<p style="font-family: SimHei,sans-serif">SimHei 黑體無襯線</p>
<p style="font-family: SimHei,serif">SimHei 黑體有襯線</p>
<p style="font-family: Microsoft JhengHei,sans-serif"> Microsoft JhengHei 微軟正黑體無襯線</p>
<p style="font-family: Microsoft JhengHei,serif">Microsoft JhengHei 微軟正黑體有襯線</p>
<p style="font-family: Microsoft YaHei,sans-serif"> Microsoft YaHei 微軟雅黑體無襯線</p>
<p style="font-family: Microsoft YaHei,serif">Microsoft YaHei 微軟雅黑體有襯線</p>
<p style="font-family: Times New Roman,sans-serif"> Times New Roman 無襯線</p>
<p style="font-family: Times New Roman,serif">Times New Roman 有襯線</p>
<h1>五種字體系列</h1>
<h3 style="font-family: monospace">monospace 字體</h3>
<p style="font-family:Courier,monospace">Courier 字體</p>
<p style="font-family:Andale Mono,monospace">Andale Mono 字體</p>
<p style="font-family:Courier New,monospace">Courier New 字體</p>
<h3 style="font-family: fantasy ">fantasy 字體</h3>
<p style="font-family:Western,fantasy">Western 字體</p>
<p style="font-family:Woodblock,fantasy">Woodblock 字體</p>
<p style="font-family:Klingon,fantasy">Klingon 字體</p>
</div>
<div class="f_r w_320">
<h3 style="font-family: sans-serif">Sans-serif 無襯線字體</h3>
<p style="font-family: Verdana,sans-serif"> Verdana 無襯線</p>
<p style="font-family: Verdana,serif">Verdana 有襯線</p>
<p style="font-family: Arial,sans-serif"> Arial 無襯線</p>
<p style="font-family: Arial,serif">Arial 有襯線</p>
<p style="font-family: Helvetica,sans-serif"> Helvetica 無襯線</p>
<p style="font-family: Helvetica,serif">Helvetica 有襯線</p>
<p style="font-family: Univers,sans-serif"> Univers 無襯線</p>
<p style="font-family: Univers,serif">Univers 有襯線</p>
<p style="font-family: Geneva,sans-serif"> Geneva 無襯線</p>
<p style="font-family: Geneva,serif">Geneva 有襯線</p>
<h3 style="font-family: serif">serif 有襯線字體</h3>
<p style="font-family:Times,sans-serif">Times 無襯線</p>
<p style="font-family:Times,serif">Times 有襯線</p>
<p style="font-family:Georgia ,sans-serif">Georgia 無襯線</p>
<p style="font-family:Georgia ,serif">Georgia 有襯線</p>
<p style="font-family:New Century Schoolbook,sans-serif">New Century Schoolbook 無襯線</p>
<p style="font-family:New Century Schoolbook,serif">New Century Schoolbook 有襯線</p>
<h3 style="font-family: cursive">cursive 字體</h3>
<p style="font-family:Zapf Chancery,cursive">Zapf Chancery 字體</p>
<p style="font-family:Author,cursive">Author 字體</p>
<p style="font-family:Comic Sans,cursive">Comic Sans 字體</p>
</div>
</div>
</body>
</html>IE10：
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（4條）