CSS設置字體——系列和風格
首先來了解一下CSS字體：
通用字體系列
前面討論過，實際上相同的字體可能有很多不同的稱呼，不過 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。
理論上講，用戶安裝的任何字體系列都會落入到上述某種通用系列中，但實際上可能并非如此，不過例外情況（如果有的話）往往很少。
<1>.字體系列
1 <html>
2 <head>
3 <style type="text/css">
4 p.serif {font-family: "Times New Roman",Georgia,Serif}
5 p.sansserif {font-family:Arial,Verdana,Sans-serif}
6 </style>
7 </head>
8
9 <body>
10 <h1>CSS font-family</h1>
11 <p class="serif">
12 This shows the Times New Roman font.
13 </p>
14 <p class="sansserif">
15 This shows the Arial font.
16 </p>
17 </body>
18 </html>
因此，我們建議在所有 font-family 規則中都提供一個通用字體系列。
這樣就提供了一條后路，在用戶代理無法提供與規則匹配的特定字體時，
就可以選擇一個候選字體。
沒錯，serif就是候選字體，以防用戶的電腦上沒有裝
serif前面的字體。
<2>.字體風格
1 <html>
2 <head>
3 <style type="text/css">
4 p.normal {font-style: normal}
5 p.italic {font-style: italic}
6 p.oblique {font-style: oblique}
7 </syle>
8 </head>
9
10 <body>
11 <p class="normal">This is a paragraph, normal.</p>
12 <p class="italic">This is a paragraph, italic.</p>
13 <p class="oblique">This is a paragraph, oblique.</p>
14 </body>
15 </html>
font-style屬性最常用于規定斜體文本。
該屬性有三個值：
- normal - 文本正常顯示
- italic - 文本斜體顯示
- oblique - 文本傾斜顯示
italic 和 oblique 的區別
font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點復雜的是明確 italic 文本和 oblique 文本之間的差別。
斜體（italic）是一種簡單的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。
通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。
posted on 2011-09-18 20:08 More study needed. 閱讀(3944) 評論(0) 收藏 舉報
浙公網安備 33010602011771號