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>

?

總結

以上是生活随笔為你收集整理的【温故知新】CSS学习笔记（字体样式属性）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。