1. 程式人生 > >字型樣式&文字樣式

字型樣式&文字樣式

1,字型樣式設定: 字型型別(風格)font-style / 字型粗細font-weight / 字型大小font-size / 字體系列font-family
組合值寫法:字型風格和字型粗細可以都不寫或者寫一個,也可以換順序,但是font-size和family的順序不能換,也必須同時給。

注意:可以用font-size設定行高。例如:font-size:20px/100px;(20是字型大小,100是框的高度,100的單位可以是px,也可以是百分比)

2,擴充套件:字型單位px ,em , rem ( 必須掌握 )
① px(畫素,相對於顯示器螢幕解析度而言)
PX特點
A,IE無法調整那些使用px作為單位的字型大小;
B,國外的大部分網站能夠調整的原因在於其使用了em或rem作為字型單位;
C,Firefox能夠調整px和em,rem。但是96%以上的中國網民使用IE瀏覽器(或核心)。
② em(相對當前元素內文字的字型尺寸,會繼承父元素大小)
EM特點
 em的值並不是固定的;
 em會繼承父級元素的字型大小。
注意:
A,任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。
B,為了簡化font-size的換算,需要在css中的body選擇器中宣告Font-size=62.5%,這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了
③ rem (相對HTML根元素,最常用的單位)
這個單位可謂集相對大小和絕對大小的優點於一身,通過它既可以做到只修改根元素就成比例地調整所有字型大小,又可以避免字型大小逐層複合的連鎖反應。
目前,除了IE8及更早版本外,所有瀏覽器均已支援rem。對於不支援它的瀏覽器,應對方法也很簡單,就是多寫一個絕對單位的宣告。這些瀏覽器會忽略用rem設定的字型大小。
例如:
p {font-size:14px; font-size:.875rem;}
注意: 
選擇使用什麼字型單位主要由你的專案來決定,如果你的使用者群都使用最新版的瀏覽器,那推薦使用rem,如果要考慮相容性,那就使用px,或者兩者同時使用。
px與rem的選擇:
A,對於只需要適配少部分手機裝置,且解析度對頁面影響不大的,使用px即可
B,對於需要適配各種移動裝置,使用rem,例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置。

3,文字樣式設定:
文字的顏色color
文字的居中方式text-align
段落首行縮排text-indent
文字裝飾性(下劃線)text-decoration
文字字母大小寫轉text-transform
文字的陰影text-shadow
段落文字的行高line-height
單詞的間距word-spacing
字元的間距letter-spacing
空格換行處理white-space
設定文字方向direction
文字的剪裁text-overflow