JavaWeb學習之路(27)–CSS之字型樣式

1. 文本與字型差別

上一篇我們學習了設定文本的樣式，包括顔色、對齊方式、裝飾線，這些實際上都是針對整個文本内容來說的。

而字型這塊，則是針對一個個的文字了，主要是設定文字的字型類型、字型風格、字型粗細、字型大小。

2. 字型類型

什麼是字型類型呢，就是我們常說的宋體、黑體、楷體、微軟雅黑等類型區分，在使用WORD編寫文檔時經常會遇到，如下圖：

在網頁中，我們同樣可以指定字型，通過font-family樣式名來指定即可。windows系統常見的内置字型有：

宋體 SimSun

黑體 SimHei

微軟雅黑 Microsoft YaHei

仿宋 FangSong

楷體 KaiTi

1

2

3

4

5

我們嘗試修改字型，代碼如下：

 <div>

       <!-- 宋體 -->

       <p style="font-family: SimSun;">

           加入生活欺騙了你

       </p>

       <!-- 黑體 -->

       <p style="font-family: SimHei;">

           相信吧，那快樂的日子即将來臨

       <!-- 微軟雅黑 -->

       <p style="font-family: Microsoft YaHei;">

           不要悲傷，不要心急

       <!-- 楷體 -->

       <p style="font-family: KaiTi;">

           猶豫的日子裡需要寂靜

   </div>

對應效果如下，可見不同字型的樣式差别還是比較大的。

3. 字型風格

什麼是字型風格呢，其實就是font-style樣式。

font-style常用取值有normal、italic兩種，其實就是正常字型、斜體兩種風格，代碼如下：

<div>

       <p style="font-style: normal;">

       <p style="font-style: italic;">

       <p>

效果如下，斜體有時候會用來突出顯示某部分文字。

4. 字型粗細

這個比較好了解，就是字型的筆畫的粗細程度，用font-weight描述，代碼：

  <p style="font-weight:lighter;">

       <p style="font-weight:normal;">

       <p style="font-weight:bold;">

       <p style="font-weight:bolder;">

其中，lighter表示比正常字型細一點，normal表示正常字型，bold表示粗體，bolder表示比粗體更粗一點，效果如下：

哈哈，是不是發現效果并不算明顯，是以實際使用過程中，font-weight用的也不多。

5. 字型大小

字型大小這個就用的非常多了，字型大小使用font-size描述，而且有好幾種描述機關。

5.1 使用像素機關

像素機關是px，預設是16px，我們可以在此基礎上調大或者調下字型。例如：

       <p style="font-size:12px;">

           這裡是12px字型

       <p style="font-size:16px;">

           這裡是16px字型

       <p style="font-size:20px;">

           這裡是20px字型

       <p style="font-size:24px;">

           這裡是24px字型

效果如下：

5.2 使用em機關

em是相對機關， 也就是說1em就是16px大小。那麼0.5em就是8px了，2em就是32px大小了，依次類推。代碼：

       <p style="font-size:0.5em;">

           這裡是0.5em字型

       <p style="font-size:1em;">

           這裡是1em字型

       <p style="font-size:1.5em;">

           這裡是1.5em字型

       <p style="font-size:2.0em;">

           這裡是2em字型

5.3 其他機關

還可以使用%号作為機關，這種用法比較少，此處不再講解。

6. 小結

CSS用法比較多，但是大家也無需死記硬背，隻要掌握了有哪些樣式，腦子中有印象，而且編寫過例子實踐過。

以後真正寫網頁用到的時候，參考下之前的例子，或者從網上搜一下，就能寫出相應的效果了。