(8)字體

body
{
font-family:Verdana,Geneva,Arial,sans-serif;
}//四種字體優先級按順序,如果前一種用戶沒有,則使用下一種,最后是默認的
 字體。

如果我們想讓用戶使用服務器中預存的字體,需要使用@font-face:
加載:

@font-face{font-family:"emblema one";      //這個名字是自己起的,最好與字體名字相同。
src:url("http://...com/../.../../emblemaone-regular.woff"),
     url("http://...com/../.../../emblemaone-regular.ttf");
}
//.woff和.ttf就是字體文件,他們儲存在服務器中,不同的后綴為了,適應不同的瀏覽器。瀏覽器會加載每一個,直到找到支持的。

使用:

h1{
font-family:"emblema one",sans-serif;
}

字體大小

body{font-size:small;}//small是關鍵字直接確定字體大小,
類似的方式有直接確定像素:如14px等等。
h1{font-size:150%;}
h2{font-size:1.2em;}
h1,h2都是以父類字體大小作為基礎,確定大小。
只需要改變body字體大小,其他字體隨之改變。
{line-height:1.6em;}//調整行高為字體的1.6倍。

字體粗細

body{font-weight:bold;}//加粗。
h1{font-weight:normal;}//使加粗的字體恢復正常。

字體樣式:

font-style:italic;
font-style:oblique;
//字體傾斜與文本傾斜,很難看出區別。

顏色:

body
{//與顏色相關的集中表達方式
background-color:sliver;
background-color:rgb(80%,40%,0%);//紅綠藍三元色。
background-color:rgb(204,102,0);//紅綠藍三原色。
background-color: #cc6600;//十六進制表示顏色的辦法。
}

文本裝飾:

body{
text-decoration:line-through;//文本中間穿過橫線。
text-decoration:overline underline;//上下劃線,想要同時疊加,必須在一起聲明。
text-decoration:none;//取消裝飾。
QQ20160425-0@2x.png

QQ20160425-1@2x.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容