CSS字體在Web瀏覽器中的應用
混亂的字體命名問題
設置字體屬性是樣式表的最常見的用途之一。不過，盡管字體選擇很重要，但是目前還沒有一種辦法能確保在 Web 上一致地使用字體，因為沒有一種統一描述字體和字體的變形的方法。
例如，字體 Times、Times New Roman 和 TimesNR 可能很類似，甚至完全相同，不過用戶代理怎么能知道這一點呢？創作人員可能在一個文檔中指定字體為 TimesNR，但是如果用戶機器上沒有安裝這種字體，用戶查看文檔會看到什么呢？即使安裝了 Times New Roman，用戶代理也不知道這兩個字體（Times New Roman 和 TimesNR）實際上是可以互換的。如果你希望一個瀏覽器上一定采用某種字體，請別妄想了。
與文字處理軟件相比，CSS 對字體并沒有提供更多的最終控制；比如加載你創建的一個 Microsoft Office 文檔時，其顯示可能取決于他已經安裝的字體。如果他安裝的字體與你的字體不同，那么文檔看上去會大不相同。使用 CSS 設計的文檔也是如此。
涉及到各種繁雜的字體變形時，如粗體或斜體文本，字體命名的問題就更是混亂。大多數人都知道，斜體文本看上去很像，但是很少有人能解釋它與傾斜文本有什么區別，甚至不知道二者之間存在區別。
Slanted 并不是斜體風格（italic-style）文本的唯一別名，例如，你可能還會看到 oblique、incline（或 inclined）、cursive 和 kursiv 等待字眼。因此，一種字體可能有一個 TimesItalic 變形，而另一種字體可能使用 GeorgiaOblique 作為變形。盡管這兩種字體實際上就相當于 Times 和 Georgia 字體的“斜體形式”，但是它們的“稱呼”有很大的不同。類似地，字體變形詞 bold、black 和 heavy 可能表示同一個意思，也可能不同。
通用字體系列
前面討論過，實際上相同的字體可能有很多不同的稱呼，不過 CSS 邁出了勇敢的一步，力圖幫助用戶代理把這種混亂狀況理清楚。
我們所認為的“字體”可能有許多字體變形組成，分別用來描述粗體、斜體文本，等等。例如，你可能已經對字體 Times 很熟悉。不過，Times 實際上是多種變形的一個組合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、 TimesBoldOblique，等等。Times 的每種變形都是一個具體的字體風格（font face），而我們通常認為的 Times 是所有這些變形字體的一個組合。換句話說，Times 實際上是一個字體系列（font family），而不只是單個的字體，盡管我們大多數人都認為字體就是某一種字體。
除了各種特定字體系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 還定義了 5 種通用字體系列：
Serif 字體
這些字體成比例，而且有上下短線。如果字體中的所有字符根據其不同大小有不同的寬度，則成該字符是成比例的。例如，小寫 i 和小寫 m 的寬度就不同。上下短線是每個字符筆劃末端的裝飾，比如小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線。Serif 字體的例子包括 Times、Georgia 和 New Century Schoolbook。
Sans-serif 字體
這些字體是成比例的，而且沒有上下短線。Sans-serif 字體的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
Monospace 字體
Monospace 字體并不是成比例的。它們通常用于模擬打字機打出的文本、老式點陣打印機的輸出，甚至更老式的視頻顯示終端。采用這些字體，每個字符的寬度都必須完全相 同，所以小寫的 i 和小寫的 m 有相同的寬度。這些字體可能有上下短線，也可能沒有。如果一個字體的字符寬度完全相同，則歸類為 Monospace 字體，而不論是否有上下短線。Monospace 字體的例子包括 Courier、Courier New 和 Andale Mono。
Cursive 字體
這些字體試圖模仿人的手寫體。通常，它們主要由曲線和 Serif 字體中沒有的筆劃裝飾組成。例如，大寫 A 再其左腿底部可能有一個小彎，或者完全由花體部分和小的彎曲部分組成。Cursive 字體的例子包括 Zapf Chancery、Author 和 Comic Sans。
Fantasy 字體
這些字體無法用任何特征來定義，只有一點是確定的，那就是我們無法很容易地將其規劃到任何一種其他的字體系列當中。這樣的字體包括 Western、Woodblock 和 Klingon。
理論上講，用戶安裝的任何字體系列都會落入到上述某種通用系列中，但實際上可能并非如此，不過例外情況（如果有的話）往往很少。
字體在Web瀏覽器當中的使用
CSS當中定義字體類型的屬性是：font-family；
語法：{font-family:字體1,字體2,字體3,...}
作用：調用客戶端字體
說明：
當指定多種字體時，用“，”分隔每種字體名稱。
當字體名稱包含兩個以上分開的單詞時，用“”把該字體名稱括起來。
當樣式規則外已經有“”時，用‘’代替“”。
注意：如 果在font-family后加上多種字體的名稱，瀏覽器會按字體名稱的順序逐一在用戶的計算機里尋找已經安裝的字體，一旦遇到與要求的相匹配的字體，就 按這種字體顯示網頁內容，并停止搜索；如果不匹配就繼續搜索，直到找到為止，萬一樣式表里的所有字體都沒有安裝的話，瀏覽器就會用自己默認的字體來替代顯 示網頁的內容。
以下是小編自己做的一個測試頁面，小編發現，這幾種字體類型，并不是所有瀏覽器都認識的，兼容的最好的應該是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：
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
全部評論（4條）