CSS字型屬性 Font Properties

CSS字型屬性 Font Properties
請停止攻擊本站!謝謝

asp學習網

原文應該是整理自 沈小雨的CSS手冊

CSS Font Properties 字型屬性

--------------------------------------
Font Properties 屬性
CSS Version 版本
Compatibility 相容性
Inherit From Parent繼承性
Description 簡介
--------------------------------------
font CSS1/CSS2 IE4+ , NS4+ 有 複合屬性。設定或檢索對象中的文本特性
color CSS1 IE4+ , NS4+ 有 檢索或設定對象的文本顏色
font-family CSS1 IE4+ , NS4+ 有 設定或檢索用於對象中文本的字型名稱序列
font-size CSS1 IE4+ , NS4+ 有 設定或檢索對象中的字型尺寸
font-size-adjust CSS2 NONE 有 設定或檢索用於對象中文本的字型名稱序列是否強制使用同一尺寸
font-stretch CSS2 NONE 有 設定或檢索用於對象中文本的文字是否橫向的展開變形
font-style CSS1 IE4+ , NS4+ 有 設定或檢索對象中的字型樣式
font-weight CSS1 IE4+ , NS4+ 有 設定或檢索對象中的文本字型的粗細
text-decoration CSS1 IE4+ , NS4+ 無 檢索或設定對象中的文本的裝飾，如底線、閃爍等
text-underline-position IE專有屬性 IE5.5+ 有 設定或檢索text-decoration屬性定義的底線的位置
text-shadow CSS2 NONE 無 設定或檢索對象中文本的文字是否有陰影及模糊效果
font-variant CSS1 IE4+ , NS6+ 有 設定或檢索對象中的文本是否為小型的大寫字母
text-transform CSS1 IE4+ , NS4+ 有 檢索或設定對象中的文本的大小寫
line-height CSS1 IE4+ , NS4+ 有 檢索或設定對象的行高。即字型最底端與字型內部頂端之間的距離
letter-spacing CSS1 IE4+ , NS6+ 有 檢索或設定對象中的文字之間的間隔
word-spacing CSS1 IE4+ , NS6+ 有 檢索或設定對象中的單詞之間插入的空格數。對於IE4+而言僅在MAC平台上可用

說明：這種顏色是CSS2標準屬性。這種顏色是IE建議樣式表屬性。這種顏色是NS私人屬性。這種顏色是目前尚無瀏覽器支援的屬性。

Font
----------
文法：

font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar

參數：

該屬性是複合屬性。第一種聲明方式請參閱各參數對應的屬性。
第二種聲明方式中的參數屬於CSS2。
caption : 使用有標題的系統控制項的文本字型（如按鈕，菜單等）
icon : 使用表徵圖標籤的字型
menu : 使用菜單的字型
message-box : 使用資訊對話方塊的文本字型
small-caption : 使用小控制項的字型
status-bar : 使用視窗狀態列的字型

說明：

設定或檢索對象中的文本特性。該屬性是複合屬性。
第一種聲明方式參數必須按照如上的排列順序。每個參數僅允許有一個值。忽略的將使用其參數對應的獨立屬性的預設值。
對於如何使用使用者端系統可能沒有的字型，可以參閱@font-face規則。
對應的指令碼特性為font。請參閱我編寫的其他書目。

樣本：

p { font: italic small-caps 600 12pts/18pts 宋體; }
p { font: italic small-caps 600 12pts/150% Courier; }
p { font: italic small-caps 600 12pts/1.5 Courier; }
p { font: italic small-caps 600 12pts/18pts Courier; }
p { font: /18pts serif; }
p { font: oblique 100 24pts; }
H1 { font: 15pt/17pt bold "Arial" normal }

Color
----------
文法：

color : color

參數：

color : 　指定顏色。請參閱顏色單位和附錄：顏色表

說明：

檢索或設定對象的文本顏色。無預設值。
注意，用顏色名稱指定color不被一些瀏覽器接受。
對應的指令碼特性為color。請參閱我編寫的其他書目。

樣本：

div {color: #345456; }
div { color: rgb(100,14,200); }
div {color: menu; }
div {color: red; }

font-family
文法：

font-family : name
font-family : cursive | fantasy | monospace | serif | sans-serif

參數：

name : 字型名稱。按優先順序排列。以逗號隔開。如果字型名稱包含空格，則應使用引號括起
第二種聲明方式使用所列出的字型序列名稱。如果使用fantasy序列，將提供預設字型序列

說明：

設定或檢索用於對象中文本的字型名稱序列。
預設值由瀏覽器確定。
序列可包含嵌入字型字型。請參閱@font-face規則。
對應的指令碼特性為fontFamily。請參閱我編寫的其他書目。

樣本：

div.fixedwidth { font-family: Courier, "Courier New", monospace }

font-size
文法：

font-size : absolute-size | relative-size | length

參數：

absolute-size : 根據對象字型進行調節。xx-small | x-small | small | medium | large | x-large | xx-large
relative-size : 相對於父對像中字型尺寸進行相對調節。使用成比例的em單位計算。larger | smaller
length : 百分數 | 由浮點數字和單位標識符組成的長度值，不可為負值。其百分比取值是基於父物件中字型的尺寸。請參閱長度單位

說明：

設定或檢索對象中的字型尺寸。
預設值為absolute-size的medium值。
對應的指令碼特性為fontSize。請參閱我編寫的其他書目。

樣本：

p { font-style: normal; }
p { font-size: 12px; }
p { font-size: 20%; }

font-size-adjust
----------
文法：

font-size-adjust : none | number

參數：

none : 允許字型序列中每一字型遵守它的自己的尺寸
number : 為字型序列中所有字型強迫指定同一尺寸

說明：

設定或檢索用於對象中文本的字型名稱序列是否強制使用同一尺寸。
目前IE5.5尚不支援此屬性。
對應的指令碼特性為fontSizeAdjust。請參閱我編寫的其他書目。

樣本：

p { font-family: arial, courier; font-size-adjust: none; }
p { font-family: verdana, courier; font-size-adjust: .56; }

font-stretch
----------
文法：

font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

參數：

normal : 不應用展開變形
narrower : 使用比當前設定的值導致字型寬度更小的值
wider : 使用比當前設定的值導致字型寬度更大的值

說明：

設定或檢索用於對象中文本的文字是否橫向的展開變形。
改變是相對於瀏覽器顯示的字型的正常寬度的。
目前IE5.5尚不支援此屬性。
對應的指令碼特性為fontStretch。請參閱我編寫的其他書目。

樣本：

p { font-stretch: wider; }
p { font-stretch: ultra-expanded; }

font-style
----------
文法：

font-style : normal | italic | oblique

參數：

normal : 正常的字型
italic : 斜體。對於沒有斜體變數的特殊字型，將應用oblique
oblique : 傾斜的字型

說明：

設定或檢索對象中的字型樣式。
對應的指令碼特性為fontStyle。請參閱我編寫的其他書目。

樣本：

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }

font-weight
----------
文法：

font-weight : normal | bold | bolder | lighter | number

參數：

normal : 正常的字型。相當於number為400。聲明此值將取消之前任何設定
bold : 粗體。相當於number為700。也相當於b對象的作用
bolder : IE5+　特粗體
lighter : IE5+　細體
number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

說明：

設定或檢索對象中的文本字型的粗細。
作用由使用者端系統安裝的字型的特定字型變數映射決定。系統選擇最近的匹配。也就是說，使用者可能看不到不同值之間的差異。
對應的指令碼特性為fontWeight。請參閱我編寫的其他書目。

樣本：

span { font-weight:800; }

text-decoration
-----------
文法：

text-decoration : none || underline || blink || overline || line-through

參數：

none : 　無裝飾
blink : 　閃爍
underline : 　底線
line-through : 　貫穿線
overline : 　上劃線

說明：

檢索或設定對象中的文本的裝飾。
有href特性的a，以及u，ins對象預設值為underline 。
對象strike，s，del，預設值是line-through。
沒有文本的對象此屬性不會作用。
對應的指令碼特性為textDecoration。請參閱我編寫的其他書目。

樣本：

div { text-decoration : underline; }
div { text-decoration : underline overline; }

text-underline-position
----------
文法：

text-underline-position : below | above

參數：

below : 　在文本下面
above : 　在文本上面

說明：

設定或檢索text-decoration屬性定義的底線的位置。
對應的指令碼特性為textUnderlinePosition。請參閱我編寫的其他書目。

樣本：

p { text-underline-position: above; text-decoration: underline; }

text-shadow
----------
文法：

text-shadow : color || length || lenth|| opacity

參數：

color : 　指定顏色。請參閱顏色單位和附錄：顏色表
length : 　由浮點數字和單位標識符組成的長度值。可為負值。第一個length指定陰影的水平延伸距離。第二個length指定陰影的垂直延伸距離。請參閱長度單位
opacity : 　由浮點數字和單位標識符組成的長度值。不可為負值。指定模糊效果的作用距離。如果你僅僅需要模糊效果，將前兩個length全部設定為0。請參閱長度單位

說明：

設定或檢索對象中文本的文字是否有陰影及模糊效果。
可以設定多組效果，方式是用逗號隔開。
可以被用於偽類:first-letter和 :first-line。
目前IE5.5尚不支援此屬性。
對應的指令碼特性為textShadow。請參閱我編寫的其他書目。

樣本：

p { text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px -5px; }
p:first-letter { font-size: 36px; color: red; text-shadow: red 0px 0px 5px;}

font-variant
文法：

font-variant : normal | small-caps

參數：

normal : 正常的字型
small-caps : 小型的大寫字母字型

說明：

設定或檢索對象中的文本是否為小型的大寫字母。
對應的指令碼特性為fontVariant。請參閱我編寫的其他書目。

樣本：

span { font-variant: small-caps; }

text-transform
----------
文法：

text-transform : none | capitalize | uppercase | lowercase

參數：

none : 　無轉換髮生
capitalize : 　將每個單詞的第一個字母轉換成大寫，其餘無轉換髮生
uppercase : 　轉換成大寫
lowercase : 　轉換成小寫

說明：

檢索或設定對象中的文本的大小寫。
對應的指令碼特性為textTransform。請參閱我編寫的其他書目。

樣本：

div { text-transform : uppercase; }

line-height
文法：

line-height : normal | length

參數：

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

說明：

檢索或設定對象的行高。即字型最底端與字型內部頂端之間的距離。
如行內包含多個對象，則應用最大行高。此時行高不可為負值。
對應的指令碼特性為lineHeight。請參閱我編寫的其他書目。

樣本：

div {line-height:6px; }
div {line-height:10.5; }

letter-spacing
文法：

letter-spacing : normal | length

參數：

normal : 　預設間隔
length : 　由浮點數字和單位標識符組成的長度值，允許為負值。請參閱長度單位

說明：

檢索或設定對象中的文字之間的間隔。
該屬性將指定的間隔添加到每個文字之後，但最後一個字將被排除在外。
對應的指令碼特性為letterSpacing。請參閱我編寫的其他書目。

樣本：

div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }

word-spacing
----------
文法：

word-spacing : normal | length

參數：

normal : 　預設間距
length : 　由浮點數字和單位標識符組成的長度值，允許為負值。請參閱長度單位

說明：

檢索或設定對象中的單詞之間插入的空格數。對於IE4+而言僅在MAC平台上可用。
對應的指令碼特性為wordSpacing。請參閱我編寫的其他書目。

樣本：

div { word-spacing : 10; }
div { word-spacing : 10px; }