【溫故知新】CSS學習筆記(字體樣式屬性)

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>


 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章