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