<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微軟雅黑",times,serif;
}
#D01,#D03,#D05{
font-family: arial;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字體系列是有一系列字體組成的,并非單個字體;
2.為避免CSS定義字體,而用戶并未安裝此字體,導致顯示問題,CSS定義了5種通用字體系列:
Serif 字體,Sans-serif 字體,Monospace 字體,Cursive 字體,Fantasy 字體
3.font-family屬性用來指定元素的字體/字體系列;
4.為避免元素定義某種指定字體,用戶未安裝此字體而導致顯示問題,可在最后加上一個字體系列,
系統(tǒng)會從前向后依次查找定義的字體,若均未找到,則遵循字體系列里的字體定義.
font-family: "微軟雅黑",times,serif;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微軟雅黑",times,serif;
font-style: normal;
}
#D01,#D05{
font-style: oblique;
}
#D03{
font-style: italic;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字體風格以font-style屬性定義;
2.字體風格默認為normal;
3.oblique和italic均未傾斜,視覺上并未太多感覺,italic是一種傾斜的風格,oblique是簡單的傾斜.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微軟雅黑",times,serif;
font-style: normal;
font-weight: normal;
}
#D01{
font-weight: bold;
}
#D02{
font-weight: lighter;
}
#D03{
font-weight: 900;
}
#D04{
font-weight: 100;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字體加粗以font-weight屬性定義,默認值normal;
2.100~900定義了9個級別,依次加粗,其中400等于normal,700等于bold;
3.關(guān)鍵字有bloder比blod要更粗,lighter比light要更細.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
font-family: "微軟雅黑",times,serif;
font-style: normal;
font-weight: normal;
font-size: 100%;
}
#D01{
font-size: 20px;
}
#D02{
font-size: 1.5em;
}
#D03{
font-size: 50%;
}
#D04{
font-size: 16px;
}
</style>
</head>
<body>
<div id="D01">
<span>01</span>
</div>
<div id="D02">
<span>02</span>
</div>
<div id="D03">
<span>03</span>
</div>
<div id="D04">
<span>04</span>
</div>
<div id="D05">
<span>05</span>
</div>
</html>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.字體大小由font-size屬性設(shè)置,默認大小16px;
2.現(xiàn)實開發(fā)中更多使用em=pixels/父元素字體大小,默認1em=16px,em為W3C推薦使用單位;
3.實際開發(fā)中,為避免絕對大小造成的縮放不適配問題,大多采用相對大小,百分比和em的組合.
