CSS對字體(Font)的變化

介紹 CSS對字體屬性設定 font family 、大小、粗細、字體..之字體屬性與屬性值應用

若瀏覽器沒有安裝此字體,中文通常內定為"細明體"


CSS 字體屬性列表

屬性 說明
font 文字屬性的簡化宣告
font-family 設定字體的屬性類型(font family)
font-size 設定字體的大小
font-style 設定字體的款式
font-variant 設定文字是否要以小型大寫 (small caps) 字體檢視
font-weight 設定字體的厚度


Property/Value Description
line-height 線列所佔有的高度


範例::用CSS改變字體

範例觀測重點 :比對加入CSS字體樣式後之差異與變化


範例::CSS 字體屬性的檢視

範例觀測重點 :

動手實驗一下 : 將 屬性值改變看看哪列文字大小變化

※※可參考底下各字體屬性的值動手作實驗



font-family屬性是用來設定字體的類別。

元素{屬性: 值 }檢視結果

p {font-family: verdana;}

Font Family Verdana.

p {font-family: Tahoma;}

Font Family Tahoma.

p {font-family: arial;}

Font Family Arial.

p {font-family: Courier New;}

Font Family Courier New.

p {font-family: impact;}

Font Family Impact.

字體大小

元素{屬性: 值 }檢視結果

p {font-size:9px;}

字體大小為 9px。

p {font-size:0.6cm;}

字體大小為 0.6 cm。

p {font-size:small;}

字體大小為 small。

p {font-size:medium;}

字體大小為 medium。

p {font-size:large;}

字體大小為 large。

p {font-size:xx-large;}

字體大小為 xx-large。

p {font-size:200%;}

字體大小為200 %。

font-size 用來設定字體大小的屬性。還有:"xx-large"、 "x-large"、 "medium"、 "small"、 "x-small"、和 "xx-small"。請自行動手實讚驗。



font-weight 文字厚度屬性值

元素{屬性: 值 }檢視結果

p {font-weight: 100;}

這是厚度 100。

p {font-weight: 900;}

這是厚度 900。

p {font-weight: normal;}

這是厚度 normal(正常)。

p {font-weight: bold;}

這是 bold 厚度(厚)。

p {font-weight: bolder;}

這是 bolder 厚度(更厚)。

p {font-weight: lighter;}

這是 lighter厚度(輕量)。

font-weight 屬性是用來設定字體的厚度。厚度的設定數值範圍從 100 、200、300、( 400相當normal大小 )...到 900 。也可以設定為 bold (厚)、bolder (更厚)、及 normal (正常)。



font-style

元素{屬性: 值 }檢視結果

p {font-style:normal;}

這是一般字體font-style:normal。

p {font-style:italic;}

這是斜體款式font-style:italic。

p {font-style:oblique;}

這是斜體款式font-style:oblique。



font-variant

元素{屬性: 值 }檢視結果

p {font-style:normal;}

這是一般字體font-style:normal。

p {font-variant:small-caps;}

轉成小型大寫font-variant:small-caps。



簡化寫法Font

元素{屬性: 值 }檢視結果

p {font:normal;}

這是一般字體font-style:normal。

p {font:small-caps;}

轉成小型大寫font-variant:small-caps。



line-height

元素{屬性: 值 }檢視結果

p {line-height:normal;}

這是內定線列所佔有的高度line-height:normal

p {line-height:3;}

數字指定線列所佔有的高度line-height:3

p {line-height:3px;}

px指定線列所佔有的高度line-height:3px

p {line-height:30%;}

%指定文字基準線高line-height:30%