CSS字體樣式值

字體樣式

font-weight: 文字粗細

• normal: 默認值，標準粗細
• bold：粗體
• bolder：更粗
• lighter：更細
• 100~900：設置具體粗細，400等同於normal，而700等同於bold
• inherit：繼承父元素字體的粗細值

<style>
        .c1 {font-weight: bold;}
        #p2 {font-weight: bolder;}
        #p3 {font-weight: lighter;}
        #p4 {font-weight: 500;}
        #p5 {font-weight: inherit;}
</style>

<p>石灰吟</p>
<hr>
<p id="p1" class="c1">千錘萬鑿出深山</p>
<hr>
<p id="p2">，烈火焚燒若等閒</p>
<hr>
<p id="p3">。粉身碎骨全不怕</p>
<hr>
<p id="p4">要留清白在人間</p>
<hr>
<ul class="c1">
    <li>
        <p id="p5">于謙 [明代]</p>
    </li>
</ul>

文字風格

font-style: -- 文字風格

• normal; -- 正常，默認就是正常的
• italic; -- 傾斜

<style>
      #p1 {font-style: italic;}
      #p2 {font-style: normal;}
</style>

<p id="p1">死去元知萬事空，但悲不見九州同</p>
<hr>
<p id="p2">王師北定中原日，家祭無忘告乃翁</p>

字體大小

通常是12px或13px或14px

注意：
一、經過font-size設置文字大小必定要帶單位，即必定要寫px;
二、若是設置成inherit表示繼承父元素的字體大小值。

<style>
       #p1 {font-size: 20px}
       .c1 {font-size: 25px}
       #p2 {font-size: inherit}
   </style>

<p id="p1">竹石</p>
<div class="c1" >
   <p>咬定青山不放鬆，立根原在破巖中</p>
   <a id="p2">千磨萬擊還堅勁，任爾東西南北</a>
</div>

文字字體

font-family: -- 字體風格

常見字體：

• serif 襯線字體
• sans-serif 非襯線字體
• 中文：宋體，微軟雅黑，黑體

注意：
設置的字體必須是用戶電腦裏已經安裝的字體，瀏覽器會使用它可識別的第一個值。
若是取值爲中文，須要用單或雙引號擴起來

<style>
       #p1 {font-family: "微軟雅黑"}
       #p2 {font-family: "宋體"}
       #p3 {font-family: "華文行楷"}
       #p4 {font-family: "華文隸書"}
       #p5 {font-family: "華文細黑"}
       #p6 {font-family: "華文楷體"}
   </style>

<p id="p1">採桑子.重陽</p>
<p id="p2">人生易老天難老，歲歲重陽。</p>
<p id="p3">今又重陽，戰地黃花分外香。</p>
<p id="p4">一年一度秋風勁，</p>
<p id="p5">不似春光。</p>
<p id="p6">勝似春光，廖廓江天萬里霜。</p>

字體顏色

• color：rgb(123,123,123); -- 字體三原色拼湊字體顏色
• color：red; -- 預設顏色

<style>
        #p1 {color: red}
        #p2 {color: blueviolet}
        #p3 {color: blue}
        #p4 {color: #00ff88}
        #p5 {color: rgb(123, 123, 123)
        }
    </style>

<p id="p1">人生易老天難老，歲歲重陽。</p>
<p id="p2">今又重陽，戰地黃花分外香。</p>
<p id="p3">一年一度秋風勁，</p>
<p id="p4">不似春光。</p>
<p id="p5">勝似春光，廖廓江天萬里霜。</p>