css字體樣式(Font Style) 屬性
發(fā)布時(shí)間:2014-01-28 23:06:00 作者:佚名
我要評(píng)論

這篇文章主要為大家介紹下css下的字體樣式,font的屬性與寫法,需要的朋友可以參考下
css文本樣式
序號(hào) | 中文說(shuō)明 | 標(biāo)記語(yǔ)法 |
1 | 字體樣式 | {font:font-style font-variant font-weight font-size font-family} |
2 | 字體類型 | {font-family:"字體1","字體2","字體3",...} |
3 | 字體大小 | {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small} |
4 | 字體風(fēng)格 | {font-style:inherit|italic|normal|oblique} |
5 | 字體粗細(xì) | {font-weight:100-900|bold|bolder|lighter|normal;} |
6 | 字體顏色 | {color:數(shù)值;} |
7 | 陰影顏色 | {text-shadow:16位色值} |
8 | 字體行高 | {line-height:數(shù)值|inherit|normal;} |
9 | 字 間 距 | {letter-spacing:數(shù)值|inherit|normal} |
10 | 單詞間距 | {word-spacing:數(shù)值|inherit|normal} |
11 | 字體變形 | {font-variant:inherit|normal|small-cps } |
12 | 英文轉(zhuǎn)換 | {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
語(yǔ)法:{font:font-style font-variant font-weight font-size font-family}
[ <字體風(fēng)格> || <字體變形> || <字體加粗> ]? <字體大小> [ / <行高> ]? <字體類形>
作用:簡(jiǎn)寫屬性,提供了對(duì)字體所有屬性進(jìn)行設(shè)置的快捷方法。
注意:字體樣式用作不同字體屬性的略寫,特別是行高。例如 P { font: italic bold 12pt/14pt Times, serif }指定該段為bold(粗體)和italic(斜體)Times或serif字體,12點(diǎn)大小,行高為14點(diǎn)。
例子:字體字體
2. 字體類形:font-family
語(yǔ)法:{font-family:字體1,字體2,字體3,...}
作用:調(diào)用客戶端字體
說(shuō)明:
·當(dāng)指定多種字體時(shí),用“,”分隔每種字體名稱。
·當(dāng)字體名稱包含兩個(gè)以上分開的單詞時(shí),用“”把該字體名稱括起來(lái)。
·當(dāng)樣式規(guī)則外已經(jīng)有“”時(shí),用‘’代替“”。
注意:如果在font-family后加上多種字體的名稱,瀏覽器會(huì)按字體名稱的順序逐一在用戶的計(jì)算機(jī)里尋找已經(jīng)安裝的字體,一旦遇到與要求的相匹配的字體,就按這種字體顯示網(wǎng)頁(yè)內(nèi)容,并停止搜索;如果不匹配就繼續(xù)搜索,直到找到為止,萬(wàn)一樣式表里的所有字體都沒(méi)有安裝的話,瀏覽器就會(huì)用自己默認(rèn)的字體來(lái)替代顯示網(wǎng)頁(yè)的內(nèi)容。
例子:{font-family:黑體,隸書;} 字體類型
3.字體大小:font-size
語(yǔ)法:{font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
作用:設(shè)定文字大小,參考取值單位
說(shuō)明:使用比例關(guān)系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large
例子:{font-size:18pt;} 字體大小
4. 字體風(fēng)格:font-style
語(yǔ)法:{font-style:inherit|italic|normal|oblique}
作用:使文本顯示為扁斜體或斜體等表示強(qiáng)調(diào)
說(shuō)明:
·inherit 繼承
·italic 斜體
·normal 正常
·oblique 偏斜體
5.字體粗細(xì):font-weight
語(yǔ)法:{font-weight:100-900|bold|bolder|lighter|normal;}
作用:設(shè)定文字的粗細(xì)
說(shuō)明:
·bold 粗體(相當(dāng)于數(shù)值700 )
·bolder 特粗體
·lighter 細(xì)體
·normal 正常體(相當(dāng)于數(shù)值400)
注意:取值范圍從數(shù)字100~900,瀏覽器默認(rèn)的字體粗細(xì)為400。另外可以通過(guò)參數(shù)lighter和bolder使得字體在原有基礎(chǔ)上顯得更細(xì)或更粗些。
6. 字體顏色:color
語(yǔ)法:{color: 數(shù)值}
作用:字體顏色
說(shuō)明:顏色參數(shù)取值范圍
·以RGB值表示
·以16進(jìn)制(hex)的色彩值表示
·以默認(rèn)顏色的英文名稱表示
注意:以默認(rèn)顏色的英文名稱表示無(wú)疑是最為方便的,但由于預(yù)定義的顏色種類太少,所以更多的網(wǎng)頁(yè)設(shè)計(jì)者喜歡用RGB的方式。RGB方式的好處很多,不但可以用數(shù)字的形式精確地表示顏色,而且也是很多圖像制作軟件(如Photoshop)里默認(rèn)使用的規(guī)范,這樣一來(lái)就為圖片和網(wǎng)頁(yè)更好地結(jié)合打下了堅(jiān)實(shí)的基礎(chǔ)。
7. 文字陰影顏色:text-shadow
語(yǔ)法:{text-shadow:16位色值}
說(shuō)明:好像不起作用?
例子:中國(guó)中國(guó)
8. 字體行高
語(yǔ)法:{line-height:數(shù)值|inherit|normal}
作用:行與行之間的距離
說(shuō)明:取值范圍
·不帶單位的數(shù)字:以1為基數(shù),相當(dāng)于比例關(guān)系的100%
·帶長(zhǎng)度單位的數(shù)字:以具體的單位為準(zhǔn)
·比例關(guān)系
注意:行距是指上下兩行基準(zhǔn)線之間的垂直距離。一般地說(shuō),英文五線格練習(xí)本,從上往下數(shù)的第三條橫線就是計(jì)算機(jī)所認(rèn)為的該行的基準(zhǔn)線。如果文字字體很大,而行距相對(duì)較小的話,可能會(huì)發(fā)生上下兩行文字互相重疊的現(xiàn)象。
9. 字 間 距:letter-spacing
語(yǔ)法:{letter-spacing:數(shù)值|inherit|normal}
作用:控制文本元素字母間的間距,所設(shè)置的距離適用于整個(gè)元素。
注意:數(shù)值 - 設(shè)置字間距長(zhǎng)度,正值表示加進(jìn)父元素中繼承的正常長(zhǎng)度,負(fù)值則減去正常長(zhǎng)度。在數(shù)字后指定度量單位:ex(小寫字母x的高度), em(大寫字母M的寬度)。
例子: 中國(guó)china 中國(guó)china
10. 單詞間距:word-spacing
語(yǔ)法:{word-spacing:數(shù)值|inherit|normal}
說(shuō)明:?jiǎn)卧~間距指的是英文每個(gè)單詞之間的距離,不包括中文文字。間隔距離的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。
11. 字體變形:font-variant
語(yǔ)法:{font-variant:inherit|normal|small-cps
作用:用于正常和小型大寫字母間切換(比正常大寫字母略小)
說(shuō)明:small-caps 小型大寫字母
7. 字母大小寫轉(zhuǎn)換:text-transform
語(yǔ)法:{text-transform:inherit|none|capitalize|uppercase|lowercase}
作用:設(shè)置一個(gè)或幾個(gè)字母的大小寫標(biāo)準(zhǔn)。
說(shuō)明:
·none 不改變文本的大寫小寫。
·capitalize 元素中毎個(gè)單詞的第一個(gè)字母用大寫。
·uppercase 將所有文本設(shè)置為大寫。
·lowercase 將所有文本設(shè)置為小寫。
例子:china abcd china abcd
13. font-size-adjust
語(yǔ)法:{font-size-adjust:inherit|none}
作用:不詳
14. font-stretch
語(yǔ)法:{font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}
作用:不詳
更詳細(xì)的可以到這里查看: http://www.dbjr.com.cn/w3school/css/pr_font_font.htm
相關(guān)文章
- CSS3中的font-face可以將我們上傳的自定義的字體顯示出來(lái),有時(shí)比如我們要顯示英文音標(biāo)的字體時(shí)便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需2016-05-13
css常用樣式font設(shè)置字體的多種變換(實(shí)例詳解)
這篇文章主要介紹了css常用樣式font設(shè)置字體的多種變換,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-19