css字體樣式(Font Style),屬性

時間：2014-05-08 21:49 來源:我愛學習網 | 作者:我愛學習網 | 本文已影響?68353 人

css字體樣式(Font Style)是網頁中不可或缺的樣式屬性之一,有了字體樣式,我們的網頁才能變得更加美觀,因此字體樣式屬性也就成為了每一位設計者必需了解的知識。以下是我精心整理的css字體樣式屬性知識，供大家學習參考：

css文本樣式

序號	中文說明	標記語法
1	字體樣式	{font:font-style font-variant font-weight font-size font-family}
2	字體類型	{font-family:"字體1","字體2","字體3",...}
3	字體大小	{font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4	字體風格	{font-style:inherit|italic|normal|oblique}
5	字體粗細	{font-weight:100-900|bold|bolder|lighter|normal;}
6	字體顏色	{color:數值;}
7	陰影顏色	{text-shadow:16位色值}
8	字體行高	{line-height:數值|inherit|normal;}
9	字 間 距	{letter-spacing:數值|inherit|normal}
10	單詞間距	{word-spacing:數值|inherit|normal}
11	字體變形	{font-variant:inherit|normal|small-cps }
12	英文轉換	{text-transform:inherit|none|capitalize|uppercase|lowercase}
13	？	{font-size-adjust:inherit|none}
14	？	{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

1. 字體樣式：font

語法：{font:font-style font-variant font-weight font-size font-family}
[ <字體風格> || <字體變形> || <字體加粗> ]? <字體大小> [ / <行高> ]? <字體類形>
作用：簡寫屬性，提供了對字體所有屬性進行設置的快捷方法。
注意：字體樣式用作不同字體屬性的略寫，特別是行高。例如 P { font: italic bold 12pt/14pt Times, serif }指定該段為bold(粗體)和italic(斜體)Times或serif字體，12點大小，行高為14點。
例子：字體字體

2. 字體類形：font-family

語法：{font-family:字體1,字體2,字體3,...}
作用：調用客戶端字體
說明：
·當指定多種字體時，用"，"分隔每種字體名稱。
·當字體名稱包含兩個以上分開的單詞時，用""把該字體名稱括起來。
·當樣式規則外已經有""時，用''代替""。
注意：如果在font-family后加上多種字體的名稱，瀏覽器會按字體名稱的順序逐一在用戶的計算機里尋找已經安裝的字體，一旦遇到與要求的相匹配的字體，就按這種字體顯示網頁內容，并停止搜索；如果不匹配就繼續搜索，直到找到為止，萬一樣式表里的所有字體都沒有安裝的話，瀏覽器就會用自己默認的字體來替代顯示網頁的內容。
例子：{font-family:黑體,隸書;}　　字體類型

3．字體大小：font-size

語法：{font-size:數值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
作用：設定文字大小
說明：使用比例關系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large

例子：{font-size:18pt;}　　字體大小

4. 字體風格：font-style

語法：{font-style:inherit|italic|normal|oblique}
作用：使文本顯示為扁斜體或斜體等表示強調
說明：
·inherit　繼承
·italic 斜體
·normal　正常
·oblique　偏斜體

5．字體粗細：font-weight

語法：{font-weight:100-900|bold|bolder|lighter|normal;}
作用：設定文字的粗細
說明：
·bold 粗體(相當于數值700 )
·bolder 特粗體
·lighter 細體
·normal 正常體(相當于數值400)
注意：取值范圍從數字100~900，瀏覽器默認的字體粗細為400。另外可以通過參數lighter和bolder使得字體在原有基礎上顯得更細或更粗些。

6. 字體顏色：color

語法：{color: 數值}



作用：字體顏色
說明：顏色參數取值范圍
·以RGB值表示
·以16進制（hex）的色彩值表示
·以默認顏色的英文名稱表示
注意：以默認顏色的英文名稱表示無疑是最為方便的，但由于預定義的顏色種類太少，所以更多的網頁設計者喜歡用RGB的方式。RGB方式的好處很多，不但可以用數字的形式精確地表示顏色，而且也是很多圖像制作軟件（如Photoshop）里默認使用的規范，這樣一來就為圖片和網頁更好地結合打下了堅實的基礎。


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

語法：{text-shadow:16位色值}
說明：好像不起作用?
例子：中國中國

8. 字體行高?

語法：{line-height:數值|inherit|normal}
作用：行與行之間的距離
說明：取值范圍
·不帶單位的數字：以1為基數，相當于比例關系的100%
·帶長度單位的數字：以具體的單位為準
·比例關系
注意：行距是指上下兩行基準線之間的垂直距離。一般地說，英文五線格練習本，從上往下數的第三條橫線就是計算機所認為的該行的基準線。如果文字字體很大，而行距相對較小的話，可能會發生上下兩行文字互相重疊的現象。

9. 字 間 距：letter-spacing?

語法：{letter-spacing:數值|inherit|normal} 作用：控制文本元素字母間的間距，所設置的距離適用于整個元素。 注意：數值 - 設置字間距長度，正值表示加進父元素中繼承的正常長度，負值則減去正常長度。在數字后指定度量單位：ex(小寫字母x的高度), em(大寫字母M的寬度)。
例子：?中國china　　?中國china

10. 單詞間距：word-spacing?

語法：{word-spacing:數值|inherit|normal}
說明：單詞間距指的是英文每個單詞之間的距離，不包括中文文字。間隔距離的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。

11. 字體變形：font-variant?

語法：{font-variant:inherit|normal|small-cps
作用：用于正常和小型大寫字母間切換(比正常大寫字母略小)
說明：small-caps 小型大寫字母

12. 字母大小寫轉換：text-transform?

語法：{text-transform:inherit|none|capitalize|uppercase|lowercase}
作用：設置一個或幾個字母的大小寫標準。
說明：
·none　不改變文本的大寫小寫。
·capitalize　元素中毎個單詞的第一個字母用大寫。
·uppercase　將所有文本設置為大寫。
·lowercase　將所有文本設置為小寫。
例子：?CHINA ABCD　CHINA ABCD

13. font-size-adjust?

語法：{font-size-adjust:inherit|none}
定義用法：font-size-adjust 屬性為某個元素規定一個 aspect 值，這樣就可以保持首選字體的 x-height。
說明：字體的小寫字母 "x" 的高度與 "font-size" 高度之間的比率被稱為一個字體的 aspect 值。當字體擁有高的 aspect 值時，那么當此字體被設置為很小的尺寸時會更易閱讀。舉例：Verdana 的 aspect 值是 0.58（意味著當字體尺寸為 100px 時，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。這就意味著 Verdana 在小尺寸時比 Times New Roman 更易閱讀。

14. font-stretch?

語法：{font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
　　　 semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}
定義用法：font-stretch 屬性可對當前的 font-family 進行伸縮變形。
所有主流瀏覽器都不支持 font-stretch 屬性。

轉載于:https://www.cnblogs.com/wangjian8888/p/6092146.html

總結

以上是生活随笔為你收集整理的css 字体样式设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。