CSS 語法 04 :字體 font

字體 (font)

字體(font)在CSS中常見的屬性有:

font-size 字體大小
color 字體顏色
font-weight 字體粗細
font-style 字體樣式(如:斜體)
font-family 字型(如:微軟正黑體)

• font-size

以數字和單位表示時如下:

p {font-size:10px;}
p {font-size:10em;}
p {font-size:10pt;}
p {font-size:200%;}

font-size 除了可以用數字和單位來表示,也可以直接指定下列的設定值,由大到小如下:
“xx-llarge”、”x-large”、”large”、”medium”、”small”、”x-small”、”xx-small”。

• color

在指定CSS文字樣式時,只需要用「color」就可以表示為文字顏色。

p {
color : red;
}
<p>紅色的字</p>

以上顯示為:
紅色的字

• font-weight

<p style="font-weight:800">粗800的字</p>
<p style="font-weight:100">粗100的字</p>

以上將顯示為:

粗800的字

粗100的字

• font-style

<p style="font-style:italic">italic 斜體</p>
<p style="font-style:oblique">oblique 斜體</p>

以上將顯示為:

italic 斜體

oblique 斜體

• font-family

<p style="font-family:verdana">verdana</p>
<p style="font-family:arial-black">arial-black</p>

以上將顯示為:

verdana

arial-black

*這個地方要注意,如果你設定的字體使用者電腦上面沒有,則會以預設的字體顯示。
以中文來說,目前不管 Mac 或是 PC 以及 ios 或 Android 大概都有「微軟正黑體」,所以如果想要黑體的效果,可以設定為「微軟正黑體」,如本網站就是以微軟正黑體為標準字。