字型樣式 文字樣式

2021-09-02 01:10:49 字數 1538 閱讀 1922

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

注意: 

選擇使用什麼字型單位主要由你的專案來決定,如果你的使用者群都使用最新版的瀏覽器,那推薦使用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

字型文字樣式相關

設定文字屬性font 文字斜體 font style normal 文字粗體設定 font weight border 文字的粗細有極限,達到極限就不會再變粗了 設定文字大小字型大小 設定文字字型 文字屬性的簡寫 設定文字屬性text text align left text align right...

CSS中的字型樣式和文字樣式

在手機端設定大小的時候,一般不使用px css字型顏色三種表達方式 1.具體顏色名稱例 color red 2.數字 0 255,百分比 0 100 例 color rgb 0 100 0 3.十六進製制 開頭,六位,0 f例 color 00880a font weight文字粗細 font we...

CSS字型 文字樣式屬性

1 字型屬性 1.2 字型大小屬性 1.3 字型粗細屬性 1.4 字型樣式屬性 1.5 字型復合屬性 2 文字外觀屬性 css fonts 字型 屬性用於定義字型系列 大小 粗細 和文字樣式 如斜體 css使用 font family屬性來定義字型 pcss使用 font size屬性來定義字型 語...