建議學習時長： 30分鐘
學習方式：深入
學習目標
- 知道文本與字體的樣式的設置
詳細介紹
font-family
指定字體名稱。字體名稱之間用逗號分割。瀏覽器會使用第一個認識的字體。如
font-family: Georgia, "Times New Roman",
"Microsoft YaHei", "微軟雅黑",
STXihei, "華文細黑",
serif;
font-size
指定字體大小。如
p{
font-size: 14px;
}
p small{
font-size: 80%;
}
color
指定文字的顏色?？蛇x值見這里
line-height
指定行高。如
p{
line-height: 1.1em;
}
div{
line-height: 24px;
}
font-weight
指定字的粗細?？蛇x值為
- inherit
- normal
- bolder（更粗）
- bold（粗）
- lighter（細）
- 100,200,300,400,500,600,700,800,900（值越大越粗，沒有單位）
font-style
屬性指定字體的風格?？蛇x值
- normal(默認值)
- italic 用字體的斜體屬性
- oblique 讓字體傾斜
- inherit 從父元素繼承字體樣式
所有主流瀏覽器都支持 font-style 屬性。
任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"
italic 與 oblique的區別
一種字體有粗體、斜體、下劃線、刪除線等諸多屬性。但是并不是所有字體都做了這些，一些不常用的字體，或許就只有個正常體，如果你用 italic，就沒有效果了~這時候你就要用Oblique。
換種說法：italic 是指斜體字，而Oblique是讓文字傾斜。對于沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果。對于有斜體屬性的字，使用italic和oblique是一樣的。
font
font由 font-style, font-variant, font-weight, font-size, line-height and font-family組成。
如
font: italic bold 1.5em/2 arial, Helvetica, sans-serif;
text-align
指定元素內文本的水平對齊方式。可選值
- left 左對齊
- right 右對齊
- center 居中對齊
- justify 兩端對齊
text-indent
指定縮進。如，段落縮進兩個字符
p{
text-indent: 2em;
}
隱藏文字可以用
.hide-text{
text-indent: -99999px;
}
text-decoration
對文本進行修飾?？蛇x值
- none
- underline 下劃線
- overline 上劃線
- line-through 中劃線
text-overflow
指定文本超過元素大小時候的處理方式。
單行文本溢出加省略號
white-space: nowrap;/* 必須要設置這個 */
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
vertical-align
用于垂直對齊inline元素，也就是display值為inline和inline-block的元素。這個屬性比較復雜，見
white-space
指定元素的內容中有空格時如何處理。
比較多的用法是，當元素內容中沒用空格時，禁止部分內容換行。
white-space: nowrap;
其他一些字體樣式規則
- font-stretch 對字進行進行伸縮變形
- @font-face 定義字體
- text-transform 控制文本的大小寫
- text-shadow 控制文本陰影效果
- font-variant 指定是否把小寫字母轉化成字號變小的大寫字母
生效規則
- 優先使用排在前面的字體。
- 如果找不到該種字體，或者該種字體不包括所要渲染的文字，則使用下一種字體。
- 如果所列出的字體，都無法滿足需要，則操作系統自行決定使用哪種字體。
使用注意點
- 絕大部分中文字體里包含英文字母（基本上都很丑），而英文字體是不包含中文字符的。因此 font-family 應該優先指定英文字體，然后再指定中文字體。否則，中文字體所包含的英文字母，會取代英文字體，而這往往很丑的。
- 把 Mac 支持的字體放在 Windows 前面。因為有一部分Mac用戶裝了Windows 下的常用字體（這得歸功于 Office for Mac），但極少的Windows 用戶裝了Mac的常用字體。
- 為了保證兼容性，中文字體的中文名稱和英文名稱，應該都寫入font-family。比如，"微軟雅黑"的英文名稱是Microsoft YaHei。
- 如果字體名稱中間有空格，則要用雙引號把字體名稱包起來。如 "Microsoft Yahei"。
