CSS字體樣式屬性
一、font-size:字號大小
該屬性可以使用相對長度單位(推薦),也可以使用絕對長度單位,推薦使用像素單位px。
相對長度單位 說明
em 相對於當前對象內文本的字體尺寸
px 像素(推薦)
絕對長度單位 說明
in 英寸
cm 釐米
mm 毫米
pt 點
Tip:谷歌瀏覽器默認的字號大小是16 px。
[樣例代碼]
<style>
p{
font-size: 16px;
}
</style>
二、font-family:字體
該屬性用於設置字體,網頁中常用的字體有宋體(比較適合印刷)、微軟雅黑、黑體等。
[樣例代碼]
<style>
*{
/*font-family: "微軟雅黑";*/
font-family: "Microsoft yahei",Arial;
}
</style>
小貼士:
- 1、現在網頁中普遍使用14px+;
- 2、儘量使用偶數的數字字號,否則老的瀏覽器用奇數容易出現bug;
- 3、各種字體之間必須使用英文狀態下的逗號隔開;
- 4、中文字體需要加英文狀態下的引號,英文字體一般不需要加引號,當需要設置英文字體時,英文字體名必須位於中文字體名之前。
- 5、如果字體名中包含了空格、*、#、$、\等符號,則該字體必須加英文狀態下的單引號或者雙引號;
- 6、儘量使用習題默認字體,保證在任何用戶的瀏覽器中都可以正常顯示;
- 7、如果有多個字體,系統會逐個按照優先級去查找,如果一個都找不到(書寫問題/瀏覽器兼容性),則使用瀏覽器默認字體;
CSS Unicode編碼
在CSS直接使用Unicode編碼來寫字體名稱可以避免一些瀏覽器不識別的問題,使其可以正確解析。
中文名 | 英文名 | unicode |
---|---|---|
宋體 | SimSun | \5B8B\4F53 |
黑體 | SimHei | \9ED1\4F53 |
新宋體 | NSimSun | \65B0\5B8B\4F53 |
楷體 | KaiTi | \6977\4F53 |
微軟正黑體 | Microsoft JhengHei | \5FAE\x8F6F\6B63\9ED1\4F53 |
微軟雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
三、font-weight:字體粗細
字體加粗除了使用b和strong標籤外,還可以使用CSS來實現,但是CSS是沒有語義的。
normal:正常字體(不加粗),相當於400
bold:粗體,相當於700
bolder:特粗體
lighter:細體
number:100/200/300...900 (建議用數字,解析起來更快)
[樣例代碼]
<style>
a{
/*font-weight: bold;*/
font-weight: 700; /* 沒有單位 == bold */
}
</style>
四、font-style:字體風格
字體傾斜除了用i和em標籤之外,還可以使用CSS來實現,但是CSS是沒有語義的。
normal:正常字體(讓斜體變正常)
italic:斜體
[樣例代碼]
<style>
em{
color:skyblue;
font-style: normal;
}
</style>