CSS–字型(Font)

font:

取值	描述(字型樣式)
caption	正常
small-caption	斜體.對於沒有斜體變數的特殊字型,將應用oblique
icon	傾斜字型
menu
message-box
status-bar

例子:

例子	效果
<span style="font:caption">Hello 中國!</span><br /> <span style="font:small-caption">Hello 中國!</span><br /> <span style="font:icon">Hello 中國!</span><br /> <span style="font:menu">Hello 中國!</span><br /> <span style="font:message-box">Hello 中國!</span><br /> <span style="font:status-bar">Hello 中國!</span>

 

font-style:

取值	描述(字型樣式)
normal	正常
italic	斜體.對於沒有斜體變數的特殊字型,將應用oblique
oblique	傾斜字型

例子:

例子	效果
<span class="span1">電腦科學與技術</span><br /> <span class="span2">電腦科學與技術</span><br /> <span class="span3">電腦科學與技術</span> .span1 { font-style:normal; } .span2 { font-style:italic; } .span3 { font-style:oblique; }

 

font-variant:

取值	描述
normal	正常字型
smallcaps	比normal小點的大寫字母字型

例子:

例子	效果
<span style="font-variant:normal">COMPuter</span><br /> <span style="font-variant:small-caps">COMPuter</span>

 

font-weight:

取值	描述(字型粗細)
normal	正常字型,相當於400
bold	粗體,相當於700
border	比normal粗
lighter	比normal細
100,200..,800,900

例子:

例子	效果
<span style="font-weight:lighter">電腦科學與技術</span><br /> <span style="font-weight:normal">電腦科學與技術</span><br /> <span style="font-weight:bold">電腦科學與技術</span><br /> <span style="font-weight:bolder">電腦科學與技術</span><br />

 

font-size:

取值	描述(字型大小)
xx-small	絕對字型,最小
x-small	絕對字型,較小
small	絕對字型,小
medium	正常
large	絕對字型,大
x-large	絕對字型,較大
xx-large	絕對字型,最大
larger	相對字型尺寸。相對於父對像中字型尺寸進行相對增大,單位:em
lighter	相對字型尺寸。相對於父對像中字型尺寸進行相對增小,單位:em
length	百分數 | 由浮點數字和單位標識符組成的長度值(20%或者12px)

例子:

例子

效果

<span style="font-size:xx-small">電腦科學與技術</span><br /> <span style="font-size:x-small">電腦科學與技術</span><br /> <span style="font-size:small">電腦科學與技術</span><br /> <span style="font-size:medium">電腦科學與技術</span><br /> <span style="font-size:large">電腦科學與技術</span><br /> <span style="font-size:x-large">電腦科學與技術</span><br /> <span style="font-size:xx-large">電腦科學與技術</span><br /> <span style="font-size:40px">電腦科學與技術</span><br /> <span style="font-size:100%">電腦科學與技術</span><br />

 

font-family:

取值	描述(字型名稱)
name	按優先順序排列。以逗號隔開。如果字型名稱包含空格，則應使用引號括起 第二種聲明方式使用所列出的字型序列名稱。

例子:

例子	效果
<span style="font-family:@幼圓">電腦科學與技術</span>

 

color:

取值	描述(顏色)
color	指定顏色.可以使#111111或者red或者rgb(100,100,100)

例子:

例子	效果
<span style="color:#11FF11">電腦科學與技術</span><br /> <span style="color:Aqua">電腦科學與技術</span>

 

text-decoration:

取值	描述(文本裝飾)
none	無裝飾
underline	底線
overline	貫穿線
line-through	上劃線
blink	閃爍

例子:

例子	效果
<span style="text-decoration:none">電腦科學與技術</span><br /> <span style="text-decoration:underline">電腦科學與技術</span><br /> <span style="text-decoration:line-through">電腦科學與技術</span><br /> <span style="text-decoration:overline">電腦科學與技術</span><br /> <span style="text-decoration:blink">電腦科學與技術(效果沒出來)</span>

 

text-transform:

取值	描述(大小寫轉換)
none	無轉換
capitalize	當每個單詞的第一個字母轉換為大寫,其餘的無轉換髮生
uppercase	轉換成大寫
lowercase	轉換成小寫

例子:

例子	效果
<span style="text-transform:none">comPUTER</span><br /> <span style="text-transform:lowercase">comPUTER</span><br /> <span style="text-transform:uppercase">comPUTER</span><br /> <span style="text-transform:capitalize">comPUTER</span>

 

line-height:

取值	描述(行高)
normal	預設行高
length	百分比數字 | 由浮點數字和單位標識符組成的長度值，允許為負值。其百分比取值是基於字型的高度尺寸

例子:

例子	效果
<span style="line-height:12px; ">comPUTER</span><br /> <span style="line-height:10.5;">comPUTER</span><br />

 

letter-spacing:

取值	描述( 字母間距)
normal	預設行高
length	百分比數字 | 由浮點數字和單位標識符組成的長度值，允許為負值。其百分比取值是基於字型的高度尺寸

例子:

例子	效果
<span style="letter-spacing:6px; ">comPUTER</span><br /> <span style="letter-spacing:5pt;">comPUTER</span><br />

 

word-spacing:

取值	描述(單詞間距)
normal	預設行高
length	百分比數字 | 由浮點數字和單位標識符組成的長度值，允許為負值。其百分比取值是基於字型的高度尺寸

例子:

例子	效果
<span style="word-spacing:10px; ">Hello World</span><br /> <span style="word-spacing:5;">Hello World</span><br />