css字型樣式 Font Style ,屬性

2021-08-23 13:29:38 字數 2458 閱讀 8910

序號

中文說明

標記語法

1字型樣式 2

字型型別 3

字型大小 4

字型風格 5

字型粗細

6字型顏色 7

陰影顏色

8字型行高 9

字 間 距 10

單詞間距

11字型變形 12

英文轉換13?

14?

1. 字型樣式:font

語法:[ 《字型風格》 || 《字型變形》 || 《字型加粗》 ]? 《字型大小》 [ / 《行高》 ]? 《字型類形》

作用:簡寫屬性,提供了對字型所有屬性進行設定的快捷方法。

注意:字型樣式用作不同字型屬性的略寫,特別是行高。例如 p 指定該段為bold(粗體)和italic(斜體)times或serif字型,12點大小,行高為14點。

例子:字型字型

2. 字型類形:font-family

語法:作用:呼叫客戶端字型

說明:·當指定多種字型時,用「,」分隔每種字型名稱。

·當字型名稱包含兩個以上分開的單詞時,用「」把該字型名稱括起來。

·當樣式規則外已經有「」時,用『』代替「」。

注意:如果在font-family後加上多種字型的名稱,瀏覽器會按字型名稱的順序逐一在使用者的計算機裡尋找已經安裝的字型,一旦遇到與要求的相匹配的字型,就按這種字型顯示網頁

的內容。

例子:  字型型別

3.字型大小:font-size

語法:作用:設定文字大小,參考取值單位

說明:使用比例關係

·xx-small

·x-small

·small

·medium

·large

·x-large

·xx-large

例子:  字型大小

4. 字型風格:font-style

語法:作用:使文字顯示為扁斜體或斜體等表示強調

說明:·inherit 繼承

·italic  斜體

·normal  正常

·oblique 偏斜體

5.字型粗細:font-weight

語法:作用:設定文字的粗細

說明:·bold 粗體(相當於數值700 )

·bolder 特粗體

·lighter 細體

·normal 正常體(相當於數值400)

注意:取值範圍從數字100~900,瀏覽器預設的字型粗細為400。另外可以通過引數lighter和bolder使得字型在原有基礎上顯得更細或更粗些。

6. 字型顏色:color

語法:

作用:字型顏色

說明:顏色引數取值範圍

·以rgb值表示

·以16進製制(hex)的色彩值表示

·以預設顏色的英文名稱表示

注意:以預設顏色的英文名稱表示無疑是最為方便的,但由於預定義的顏色種類太少,所以更多的網頁

設計更好地結合打下了堅實的基礎。

7. 文字陰影顏色:text-shadow

語法:說明:好像不起作用?

例子:中國中國

8. 字型行高

語法:

作用:行與行之間的距離

說明:取值範圍

·不帶單位的數字:以1為基數,相當於比例關係的100%

·帶長度單位的數字:以具體的單位為準

·比例關係

注意:行距是指上下兩行基準線之間的垂直距離。一般地說,英文五線格練習本,從上往下數的第三條橫線就是計算機所認為的該行的基準線。如果文字字型很大,而行距相對較小的話,可能會發生上下兩行文字互相重疊的現象。

9. 字 間 距:letter-spacing

語法:

作用:控制文字元素字母間的間距,所設定的距離適用於整個元素。

注意:數值 - 設定字間距長度,正值表示加進父元素中繼承的正常長度,負值則減去正常長度。在數字後指定度量單位:ex(小寫字母x的高度), em(大寫字母m的寬度)。

例子:中國china

中國china

10. 單詞間距:word-spacing

語法:

說明:單詞間距指的是英文每個單詞之間的距離,不包括中文文字。間隔距離的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。

11. 字型變形:font-variant

語法:作用:設定乙個或幾個字母的大小寫標準。

說明:·none    不改變文字的大寫小寫。

·capitalize 元素中毎個單詞的第乙個字母用大寫。

·uppercase  將所有文字設定為大寫。

·lowercase  將所有文字設定為小寫。

例子:china abcd china abcd

13. font-size-adjust

語法:作用:不詳

14. font-stretch

語法:

css字型樣式

注 以下的字型樣式只可在ie中使用。刪除線刪除線 加上背景色 加上背景色 左右翻轉效果 左右翻轉效果 上下翻轉效果 上下翻轉效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發光文字效果 發...

css 字型樣式

通常使用絕對大小定義文件的基準字型大小,然後使用相對大小定義其它文字 如 定義文件預設字型大小為12培訓,位150 則呈現12px大小,呈現為18px的大小 常用技巧 中文網頁的字型大小設定,通常使用偶書字型大小,以避免文字邊緣出現毛邊,如14px或22px 在pc端設定字型大小最小值為12px,在...

CSS字型樣式

字型 font family 文字大小 font size 文字顏色 color 文字粗細 font weight 文字樣式 font style 定義元素內文字以什麼字型來顯示 語法 font family 字型1,字型2,說明 含空格字型名和中文,用英文引號括起 多個字型,用英文逗號隔開 引號巢...