10-1 使用font-family設置字體系列
可以使用css樣式爲網頁中的文字設置字體、字號、顔色等樣式屬性。
爲網頁中的文字設置字體爲宋體:body{font-family:"宋體";}
這裡注意不要設置不常用的字體,因爲如果用戶本地電腦上如果沒有安裝你設置的字體,就會顯示瀏覽器默認的字體。(因爲用戶是否可以看到你設置的字體樣式取決於用戶本地電腦上是否安裝你設置的字體。)
現在一般網頁喜歡設置“微軟雅黑”,如下代碼:
body{font-family:"Microsoft Yahei";} 或 body{font-family:"微軟雅黑";}
注意:第一種方法比第二種方法兼容性更好一些。
因爲這種字體即美觀又可以在客戶耑安全的顯示出來(用戶本地一般都是默認安裝的)。
10-2 使用font-size設置字體大小
可以使用下面代碼設置網頁中文字的字號爲12像素:
body{font-size:12px;}
10-3 使用font-weight設置字體粗細
我們還可以使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線。
可以使用下面代碼實現設置文字以粗體樣式顯示出來。
p span{font-weight:bold;}
如果想爲文字設置粗體是有單獨的css樣式來實現的,再不用爲了實現粗體樣式而使用h1-h6或strong標簽了。
10-4 使用font-style設置字體樣式
我們來學習設置字體樣式font-style屬性,比如我們想實現以下效果:
如果想實現以上效果,我們可以輸入以下代碼:
技術點的解釋:
1、font-style可以設置字體樣式,並且有種3設置方式。
2、正常字體爲normal,也是font-style的默認值。
3、italic爲設置字體爲斜體,用於字體本身就有傾斜的樣式。
4、oblique爲設置傾斜的字體,強制將字體傾斜。
10-5 使用color設置字體顔色
有時候當我們需要給字體設置顔色,比如實現以下效果:
那麽我們可以輸入以下代碼:
技術點的解釋:
1、color屬性可以設置字體顔色。
2、color的值有3種設置方式:
英文命令顔色
p{color:red;}
RGB顔色
這個與 photoshop 中的 RGB 顔色是一致的,由 R(red)、G(green)、B(blue) 三種顔色的比例來配色。
p{color:rgb(133,45,200);}
每一項的值可以是 0~255 之間的整數,也可以是 0%~100% 的百分數。如:
p{color:rgb(20%,33%,25%);}
十六進制顔色
這種顔色設置方法是現在比較普遍使用的方法,其原理其實也是 RGB 設置,但是其每一項的值由 0-255 變成了十六進制 00-ff。
p{color:#00ffff;}
配色表:
10-6 font樣式的簡寫方式
網頁中的字體css樣式代碼也有他自己的縮寫方式,下面是給網頁設置字體的代碼:
body{
font-style:italic;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
這麽多行的代碼其實可以縮寫爲一句:
body{
font:italic bold 12px/1.5em "宋體",sans-serif;
}
1、使用這一簡寫方式你至少要指定font-size和font-family屬性,其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。
2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
一般情況下因爲對於中文網站,英文還是比較少的,所以下面縮寫代碼比較常用:
body{
font:12px/1.5em "宋體",sans-serif;
}
只是有字號、行間距、中文字體、英文字體設置。