css 字體屬性詳細總結

1，font-size屬性設置字體的大小

聲明：

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

請始終使用正確的 HTML 標題，比如使用 <h2> - <h7> 來標記標題，使用 <p> 來標記段落。

使用像素來設置字體大小 （px）

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

h2 {font-size:60px;}

使用百分比設置字體大小 （%）

父元素的百分比

body{
font-size: 40px;
}
h2,h3{
font-size: 100%; 表示和父元素body元素定義的字體一樣大
}
h2{
font-size:50%;   表示相對于父元素來說,h2屬性字體是父元素的1/2;(20px)
}
h3{
font-size: 200%; 表示相對于父元素來說,h3屬性字體是父元素的2倍;(80px)
}

smaller比父元素更小

body{
font-size: 40px;
}
h2,h3{
font-size: smaller; 表示比父元素body元素定義的字體更小，
}

larger:比父元素更大：

body{
font-size: 40px;
}
h2,h3{
font-size: larger; 表示比父元素body元素定義的字體更大，
}

inherit:繼承父元素的

body{
font-size: 40px;
}
h2,h3{
font-size: larger; 表示繼承父元素body元素定義的字體大小，
}

 
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(更細)

 
p.normal {
font-weight:normal;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900
}

4,font-style字體風格

normal ：正常標準

italic ：斜體

oblique ：傾斜

inherit ：繼承

p.normal {
font-style:normal;
}
p.italic {
font-style:italic;
}
p.oblique {
font-style:oblique;
}

italic 和 oblique 的區別

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

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

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

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

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

p.small
  {
  font-variant:small-caps;
  }