css 字型屬性詳細總結

1，font-size屬性設定字型的大小

聲明：

有能力管理文本的大小在 web 設計領域很重要。但是，您不應當通過調整文本大小使段落看上去像标題，或者使标題看上去像段落。

請始終使用正确的 HTML 标題，比如使用 <h1> - <h6> 來标記标題，使用 <p> 來标記段落。

通過像素設定文本大小，可以對文本大小進行完全控制：

h1 {font-size:60px;}

父元素的百分比

<code>body{</code>

<code>font-size: 40px;</code>

<code>}</code>

<code>h1,h2{</code>

<code>font-size: 100%; 表示和父元素body元素定義的字型一樣大</code>

<code>h1{</code>

<code>font-size:50%;   表示相對于父元素來說,h1屬性字型是父元素的1/2;(20px)</code>

<code>h2{</code>

<code>font-size: 200%; 表示相對于父元素來說,h2屬性字型是父元素的2倍;(80px)</code>

smaller比父元素更小

<code>font-size: smaller; 表示比父元素body元素定義的字型更小，</code>

larger:比父元素更大：

<code>font-size: larger; 表示比父元素body元素定義的字型更大，</code>

inherit:繼承父元素的

<code>font-size: larger; 表示繼承父元素body元素定義的字型大小，</code>

2，font-family定義字型類型

可以使用逗号（，）隔開，以確定字型不存在的時候直接使用下一個字型

p {

font-family: '微軟雅黑',‘宋體’Times, TimesNR, 'New Century Schoolbook',

Georgia, 'New York', serif;

}

3，font-weight字型加粗

使用 bold 關鍵字可以将文本設定為粗體。

關鍵字 100 ~ 900 為字型指定了 9 級加粗度。如果一個字型内置了這些加粗級别，那麼這些數字就直接映射到預定義的級别，100 對應最細的字型變形，900 對應最粗的字型變形。數字 400 等價于 normal，而 700 等價于 bold。

如果将元素的加粗設定為 bolder，浏覽器會設定比所繼承值更粗的一個字型加粗。與此相反，關鍵詞 lighter 會導緻浏覽器将加粗度下移而不是上移。

normal（預設值），bold(粗), bolder(更粗) ，lighter(更細)

<code> </code> 

<code>p.normal {</code>

<code>font-weight:normal;</code>

<code>p.thick {</code>

<code>font-weight:bold;</code>

<code>p.thicker {</code>

<code>font-weight:900</code>

4,font-style字型風格

normal ：正常标準

italic ：斜體

oblique ：傾斜

inherit ：繼承

<code>font-style:normal;</code>

<code>p.italic {</code>

<code>font-style:italic;</code>

<code>p.oblique {</code>

<code>font-style:oblique;</code>

font-style 非常簡單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點複雜的是明确 italic 文本和 oblique 文本之間的差别。

斜體（italic）是一種簡單的字型風格，對每個字母的結構有一些小改動，來反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。

通常情況下，italic 和 oblique 文本在 web 浏覽器中看上去完全一樣。

5，font-variant 小型大寫字母顯示文本

font-variant 屬性設定小型大寫字母的字型顯示文本，這意味着所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字型的字母與其餘文本相比，其字型尺寸更小。

<code>p.small</code>

<code>  </code><code>{</code>

<code>  </code><code>font-variant:small-caps;</code>

<code>  </code><code>}</code>

<code></code>

      本文轉自crazy_charles 51CTO部落格，原文連結：http://blog.51cto.com/douya/1840855，如需轉載請自行聯系原作者