021_CSS字体
1. CSS字體屬性定義文本的字體系列、大小、加粗、風格(如斜體)和變形(如小型大寫字母)。
2. CSS字體屬性
3. CSS字體系列
3.1. 使用font-family屬性定義字體系列。
3.2. 在CSS中, 有兩種不同類型的字體系列名稱:
?3.1.1. 通用字體系列:?擁有相似外觀的字體系統組合(比如:?"Serif"或"Monospace")。
?3.1.2. 特定字體系列:?具體的字體系列(比如:?"Times New Roman" 或 "Courier New")。
3.3. 通用字體族
3.3.1.?在CSS中, 有五個通用字體族:
- 襯線字體(Serif), 在每個字母的邊緣都有一個小的筆觸。它們營造出一種形式感和優雅感。
- 無襯線字體(Sans-serif), 字體線條簡潔(沒有小筆畫)。它們營造出現代而簡約的外觀。
- 等寬字體(Monospace), 這里所有字母都有相同的固定寬度。它們創造出機械式的外觀。
- 草書字體(Cursive), 模仿了人類的筆跡。
- 幻想字體(Fantasy), 是裝飾性/俏皮的字體。
3.3.2.?所有不同的字體名稱都屬于這五個通用字體系列之一。
3.3.3.?Serif和Sans-serif字體之間的區別:
3.3.4.?在計算機屏幕上, 無襯線字體被認為比襯線字體更易于閱讀。
3.3.5.?一些字體的例子
3.4. font-family可以把多個字體名稱作為一個"后備"系統來保存。如果瀏覽器不支持第一個字體, 則會嘗試下一個。也就是說, font-family屬性的值是用于某個元素的字體族名稱或/及類族名稱的一個優先表。瀏覽器會使用它可識別的第一個值。
3.5.?font-family可以把多個字體名稱時, 使用逗號分割每個值，強烈推薦使用一個通用字體系列名作為后路。
3.6. 使用引號
?3.6.1. 當字體名中有一個或多個空格(比如 New York), 或者如果字體名包括#或$之類的符號, 需要在font-family聲明中加引號。
?3.6.2. 單引號或雙引號都可以接受。但是, 如果把一個font-family屬性放在html的style屬性中, 則需要使用該屬性本身未使用的那種引號:
<p style="font-family: 'Times New Roman', Georgia, serif;">...</p>3.7. 默認值
3.8. 可能的值
3.9. 例子
3.9.1. 代碼
<!DOCTYPE html> <html><head><title>指定字體系列</title><meta charset="utf-8" /><style type="text/css">h1 {font-family: 'Times New Roman', serif;}p {font-family: Arial, Verdana, Helvetica, Sans-serif;}</style></head><body><h1>This is heading 1</h1><p>This is a paragraph.</p><p>This is a paragraph.</p><p>...</p></body> </html>3.9.2. 效果圖
4. 字體風格
4.1. font-style 屬性最常用于規定斜體文本。
4.2. 斜體(italic)是一種簡單的字體風格, 對每個字母的結構有一些小改動, 來反映變化的外觀。與此不同, 傾斜(oblique)文本則是正常豎直文本的一個傾斜版本。
4.3. 通常情況下, italic和oblique文本在web瀏覽器中看上去完全一樣, 但是傾斜支持較少。
4.4. 默認值
4.5. 可能的值
4.6. 例子
4.6.1. 代碼
<!DOCTYPE html> <html><head><title>字體風格</title><meta charset="utf-8" /><style type="text/css">p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}</style></head><body><p class="normal">This is a paragraph, normal.</p><p class="italic">This is a paragraph, italic.</p><p class="oblique">This is a paragraph, oblique.</p></body> </html>4.6.2. 效果圖
5. 字體變形
5.1. font-variant屬性設置小型大寫字母的字體顯示文本, 這意味著所有的小寫字母均會被轉換為大寫, 但是所有使用小型大寫字體的字母與其余文本相比, 其字體尺寸更小。
5.2. 默認值
5.3. 可能的值
5.4. 例子
5.4.1. 代碼
<!DOCTYPE html> <html><head><title>字體變形</title><meta charset="utf-8" /><style type="text/css">p.normal {font-variant: normal;}p.small {font-variant: small-caps;}</style></head><body><p class="normal">This is a paragraph</p><p class="small">This is a paragraph</p></body> </html>5.4.2. 效果圖
6. 字體加粗
6.1. font-weight屬性設置文本的粗細。
6.2. 關鍵字100 ~ 900為字體指定了9級加粗度。如果一個字體內置了這些加粗級別, 那么這些數字就直接映射到預定義的級別, 100對應最細的字體變形, 900對應最粗的字體變形。數字400等價于normal, 而700等價于 bold。
6.3. 默認值
6.4.?可能的值
6.5. 例子
6.5.1. 代碼
<!DOCTYPE html> <html><head><title>字體加粗</title><meta charset="utf-8" /><style type="text/css">p.normal {font-weight: normal;}p.bold {font-weight: bold;}p.bolder {font-weight: bolder;}p.lighter {font-weight: lighter;}p.fw100 {font-weight: 100;}p.fw200 {font-weight: 200;}p.fw300 {font-weight: 300;}p.fw400 {font-weight: 400;}p.fw500 {font-weight: 500;}p.fw600 {font-weight: 600;}p.fw700 {font-weight: 700;}p.fw800 {font-weight: 800;}p.fw900 {font-weight: 900;}</style></head><body><p class="normal">默認值。定義標準的字符。</p><p class="bold">定義粗體字符。<p class="bolder">定義更粗的字符。</p><p class="lighter">定義更細的字符。</p></p><p class="fw100">定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。 100</p><p class="fw200">200</p><p class="fw300">300</p><p class="fw400">400</p><p class="fw500">500</p><p class="fw600">600</p><p class="fw700">700</p><p class="fw800">800</p><p class="fw900">900</p></body> </html>6.5.2. 效果圖
7. 字體大小
7.1. font-size屬性可設置字體的尺寸。
7.2. 該屬性設置元素的字體大小。注意, 實際上它設置的是字體中字符框的高度; 實際的字符字形可能比這些框高或矮(通常會矮)。
7.3. 如果您沒有規定字體大小, 普通文本(比如段落)的默認大小是16像素(16px=1em)。
7.4. 默認值
7.5. 可能的值
7.6. 例子
7.6.1. 代碼
<!DOCTYPE html> <html><head><title>字體大小</title><meta charset="utf-8" /><style type="text/css">#xx-small {font-size: xx-small;}#x-small {font-size: x-small;}#small {font-size: small;}#medium {font-size: medium; }#large {font-size: large; }#x-large {font-size: x-large; }#xx-large {font-size: xx-large; }#smaller {font-size: smaller; }#larger {font-size: larger; }.span01 {font-size: 60px;}.span02 {font-size: 40px;}.span03 {font-size: 16px;}.span04 {font-size: 3.75em;}.span05 {font-size: 2.5em;}.span06 {font-size: 1em;}</style></head><body><p id="xx-small">xx-small</p><p id="x-small">x-small</p><p id="small">small</p><p id="medium">medium</p><p id="large">large</p><p id="x-large">x-large</p><p id="xx-large">xx-large</p><p id="smaller">smaller</p><p id="larger">larger</p><span class="span01">60px</span><span class="span02">40px</span><span class="span03">16px</span><span>browser default px</span><br /><span class="span04">3.75em</span><span class="span05">2.5em</span><span class="span06">1em</span></body> </html>7.6.2. 效果圖
8. 字體
8.1. font簡寫屬性在一個聲明中設置所有字體屬性。
8.2. 此屬性也有第六個值: "line-height", 可設置行間距。
8.3. 可以按順序設置如下屬性:
- ?font-style
- ?font-variant
- ?font-weight
- ?font-size/line-height
- ?font-family
8.4. 例子
8.4.1. 代碼
<!DOCTYPE html> <html><head><title>字體</title><meta charset="utf-8" /><style type="text/css">p {font: italic small-caps bold 2em/50px Arial; background-color: red;}</style></head><body><p>This is a paragraph.</p></body> </html>8.4.2. 效果圖
總結
- 上一篇： 022_CSS文本
- 下一篇： 037_CSS媒介类型