Css-文字字體

1、CSS 文本CSS 文本屬性可定義文本的外觀。通過(guò)文本屬性，您可以改變文本的顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)，等等?？s進(jìn)文本把 Web 頁(yè)面上的段落的第一行縮進(jìn)，這是一種最常用的文本格式化效果。CSS 提供了text-indent 屬性，該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。通過(guò)使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值。這個(gè)屬性最常見(jiàn)的用途是將段落的首行縮進(jìn)，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：p text-indent: 5em;注意：一般來(lái)說(shuō)，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無(wú)法將該屬性應(yīng)用于行內(nèi)

2、元素，圖像之類的替換元素上也無(wú)法應(yīng)用 text-indent 屬性。不過(guò)，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像，它會(huì)隨該行的其余文本移動(dòng)。提示：如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果。使用負(fù)值text-indent 還可以設(shè)置為負(fù)值。利用這種技術(shù)，可以實(shí)現(xiàn)很多有趣的效果，比如“懸掛縮進(jìn)”，即第一行懸掛在元素中余下部分的左邊：p text-indent: -5em;不過(guò)在為 text-indent 設(shè)置負(fù)值時(shí)要當(dāng)心，如果對(duì)一個(gè)段落設(shè)置了負(fù)值，那么首行的某些文本可能會(huì)超出瀏覽器窗口的左邊界。為了避免出現(xiàn)這種顯示問(wèn)題，建議針對(duì)負(fù)縮進(jìn)再設(shè)置一個(gè)外邊距或一些內(nèi)

3、邊距：p text-indent: -5em; padding-left: 5em;使用百分比值text-indent 可以使用所有長(zhǎng)度單位，包括百分比值。百分?jǐn)?shù)要相對(duì)于縮進(jìn)元素父元素的寬度。換句話說(shuō)，如果將縮進(jìn)值設(shè)置為 20%，所影響元素的第一行會(huì)縮進(jìn)其父元素寬度的 20%。在下例中，縮進(jìn)值是父元素的 20%，即 100 個(gè)像素：div width: 500px;p text-indent: 20%;this is a paragragh繼承text-indent 屬性可以繼承，請(qǐng)考慮如下標(biāo)記：div#outer width: 500px;div#inner text-indent: 10%

4、;p width: 200px;some text. some text. some text.this is a paragragh.以上標(biāo)記中的段落也會(huì)縮進(jìn) 50 像素，這是因?yàn)檫@個(gè)段落繼承了 id 為 inner 的 div 元素的縮進(jìn)值。水平對(duì)齊text-align是一個(gè)基本的屬性，它會(huì)影響一個(gè)元素中的文本行互相之間的對(duì)齊方式。它的前 3 個(gè)值相當(dāng)直接，不過(guò)第 4 個(gè)和第 5 個(gè)則略有些復(fù)雜。值 left、right 和 center 會(huì)導(dǎo)致元素中的文本分別左對(duì)齊、右對(duì)齊和居中。西方語(yǔ)言都是從左向右讀，所有 text-align 的默認(rèn)值是 left。文本在左邊界對(duì)齊，右邊界呈鋸齒狀（

5、稱為“從左到右”文本）。對(duì)于希伯來(lái)語(yǔ)和阿拉伯語(yǔ)之類的的語(yǔ)言，text-align 則默認(rèn)為 right，因?yàn)檫@些語(yǔ)言從右向左讀。不出所料，center 會(huì)使每個(gè)文本行在元素中居中。提示：將塊級(jí)元素或表元素居中，要通過(guò)在這些元素上適當(dāng)?shù)卦O(shè)置左、右外邊距來(lái)實(shí)現(xiàn)。text-align:center 與 您可能會(huì)認(rèn)為 text-align:center 與 元素的作用一樣，但實(shí)際上二者大不相同。 不僅影響文本，還會(huì)把整個(gè)元素居中。text-align 不會(huì)控制元素的對(duì)齊，而只影響內(nèi)部?jī)?nèi)容。元素本身不會(huì)從一段移到另一端，只是其中的文本受影響。justify最后一個(gè)水平對(duì)齊屬性是 justify。在兩端對(duì)

6、齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長(zhǎng)度恰好相等。您也許已經(jīng)注意到了，兩端對(duì)齊文本在打印領(lǐng)域很常見(jiàn)。需要注意的是，要由用戶代理（而不是 CSS）來(lái)確定兩端對(duì)齊文本如何拉伸，以填滿父元素左右邊界之間的空間。字間隔word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。其默認(rèn)值 normal 與設(shè)置值為 0 是一樣的。word-spacing 屬性接受一個(gè)正長(zhǎng)度值或負(fù)長(zhǎng)度值。如果提供一個(gè)正長(zhǎng)度值，那么字之間的間隔就會(huì)增加。為 word-spacing 設(shè)置一個(gè)負(fù)值，會(huì)把它拉近：This is a paragraph. The spaces

7、 between words will be increased.This is a paragraph. The spaces between words will be decreased. 字母間隔letter-spacing 屬性與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之間的間隔。與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長(zhǎng)度。默認(rèn)關(guān)鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長(zhǎng)度值會(huì)使字母之間的間隔增加或減少指定的量：h1 letter-spacing: -0.5emh4 le

8、tter-spacing: 20pxThis is header 1This is header 4字符轉(zhuǎn)換text-transform 屬性處理文本的大小寫(xiě)。這個(gè)屬性有 4 個(gè)值： none uppercase lowercase capitalize默認(rèn)值 none 對(duì)文本不做任何改動(dòng)，將使用源文檔中的原有大小寫(xiě)。顧名思義，uppercase 和 lowercase 將文本轉(zhuǎn)換為全大寫(xiě)和全小寫(xiě)字符。最后，capitalize 只對(duì)每個(gè)單詞的首字母大寫(xiě)。作為一個(gè)屬性，text-transform 可能無(wú)關(guān)緊要，不過(guò)如果您突然決定把所有 h1 元素變?yōu)榇髮?xiě)，這個(gè)屬性就很有用。不必單獨(dú)地修改所有

9、 h1 元素的內(nèi)容，只需使用 text-transform 為你完成這個(gè)修改：h1 text-transform: uppercase使用 text-transform 有兩方面的好處。首先，只需寫(xiě)一個(gè)簡(jiǎn)單的規(guī)則來(lái)完成這個(gè)修改，而無(wú)需修改 h1 元素本身。其次，如果您以后決定將所有大小寫(xiě)再切換為原來(lái)的大小寫(xiě)，可以更容易地完成修改。文本裝飾接下來(lái)，我們討論text-decoration 屬性，這是一個(gè)很有意思的屬性，它提供了很多非常有趣的行為。text-decoration 有 5 個(gè)值： none underline overline line-through blink不出所料，underl

10、ine 會(huì)對(duì)元素加下劃線，就像 HTML 中的 U 元素一樣。overline 的作用恰好相反，會(huì)在文本的頂端畫(huà)一個(gè)上劃線。值 line-through 則在文本中間畫(huà)一個(gè)貫穿線，等價(jià)于 HTML 中的 S 和 strike 元素。blink 會(huì)讓文本閃爍，類似于 Netscape 支持的頗招非議的 blink 標(biāo)記。none 值會(huì)關(guān)閉原本應(yīng)用到一個(gè)元素上的所有裝飾。通常，無(wú)裝飾的文本是默認(rèn)外觀，但也不總是這樣。例如，鏈接默認(rèn)地會(huì)有下劃線。如果您希望去掉超鏈接的下劃線，可以使用以下 CSS 來(lái)做到這一點(diǎn)：a text-decoration: none;注意：如果顯式地用這樣一個(gè)規(guī)則去掉鏈接的下

11、劃線，那么錨與正常文本之間在視覺(jué)上的唯一差別就是顏色（至少默認(rèn)是這樣的，不過(guò)也不能完全保證其顏色肯定有區(qū)別）。還可以在一個(gè)規(guī)則中結(jié)合多種裝飾。如果希望所有超鏈接既有下劃線，又有上劃線，則規(guī)則如下：a:link a:visited text-decoration: underline overline;不過(guò)要注意的是，如果兩個(gè)不同的裝飾都與同一元素匹配，勝出規(guī)則的值會(huì)完全取代另一個(gè)值。請(qǐng)考慮以下的規(guī)則：h2.stricken text-decoration: line-through;h2 text-decoration: underline overline;對(duì)于給定的規(guī)則，所有 class

12、為 stricken 的 h2 元素都只有一個(gè)貫穿線裝飾，而沒(méi)有下劃線和上劃線，因?yàn)閠ext-decoration 值會(huì)替換而不是累積起來(lái)。處理空白符white-space 屬性會(huì)影響到用戶代理對(duì)源文檔中的空格、換行和 tab 字符的處理。通過(guò)使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，默認(rèn)的 XHTML 處理已經(jīng)完成了空白符處理：它會(huì)把所有空白符合并為一個(gè)空格。所以給定以下標(biāo)記，它在 Web 瀏覽器中顯示時(shí)，各個(gè)字之間只會(huì)顯示一個(gè)空格，同時(shí)忽略元素中的換行：This paragraph has many spaces in it.可以用以下聲明顯式地設(shè)置這

13、種默認(rèn)行為：p white-space: normal;上面的規(guī)則告訴瀏覽器按照平常的做法去處理：丟掉多余的空白符。如果給定這個(gè)值，換行字符（回車）會(huì)轉(zhuǎn)換為空格，一行中多個(gè)空格的序列也會(huì)轉(zhuǎn)換為一個(gè)空格。值 pre不過(guò)，如果將 white-space 設(shè)置為 pre，受這個(gè)屬性影響的元素中，空白符的處理就有所不同，其行為就像 XHTML 的 pre 元素一樣；空白符不會(huì)被忽略。如果 white-space 屬性的值為 pre，瀏覽器將會(huì)注意額外的空格，甚至回車。在這個(gè)方面，而且僅在這個(gè)方面，任何元素都可以相當(dāng)于一個(gè) pre 元素。注意：經(jīng)測(cè)試，IE 7 以及更早版本的瀏覽器不支持該值，因此請(qǐng)使用

14、非 IE 的瀏覽器來(lái)查看上面的實(shí)例。值 nowrap與之相對(duì)的值是 nowrap，它會(huì)防止元素中的文本換行，除非使用了一個(gè) br 元素。在 CSS 中使用 nowrap 非常類似于 HTML 4 中用 將一個(gè)表單元格設(shè)置為不能換行，不過(guò) white-space 值可以應(yīng)用到任何元素。值 pre-wrap 和 pre-lineCSS2.1 引入了值 pre-wrap 和 pre-line，這在以前版本的 CSS 中是沒(méi)有的。這些值的作用是允許創(chuàng)作人員更好地控制空白符處理。如果元素的 white-space 設(shè)置為 pre-wrap，那么該元素中的文本會(huì)保留空白符序列，但是文本行會(huì)正常地?fù)Q行。如果

15、設(shè)置為這個(gè)值，源文本中的行分隔符以及生成的行分隔符也會(huì)保留。pre-line 與 pre-wrap 相反，會(huì)像正常文本中一樣合并空白符序列，但保留換行符。注意：我們?cè)?IE7 和 FireFox2.0 瀏覽器中測(cè)試了上面的兩個(gè)實(shí)例，但是結(jié)果是，值 pre-wrap 和 pre-line 都沒(méi)有得到很好的支持。總結(jié)下面的表格總結(jié)了 white-space 屬性的行為：值空白符換行符自動(dòng)換行pre-line合并保留允許normal合并忽略允許nowrap合并忽略不允許pre保留保留不允許pre-wrap保留保留允許文本方向如果您閱讀的是英文書(shū)籍，就會(huì)從左到右、從上到下地閱讀，這就是英文的流方向。不

16、過(guò)，并不是所有語(yǔ)言都如此。我們知道古漢語(yǔ)就是從右到左來(lái)閱讀的，當(dāng)然還包括希伯來(lái)語(yǔ)和阿拉伯語(yǔ)等等。CSS2 引入了一個(gè)屬性來(lái)描述其方向性。direction 屬性影響塊級(jí)元素中文本的書(shū)寫(xiě)方向、表中列布局的方向、內(nèi)容水平填充其元素框的方向、以及兩端對(duì)齊元素中最后一行的位置。注釋：對(duì)于行內(nèi)元素，只有當(dāng)unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時(shí)才會(huì)應(yīng)用 direction 屬性。direction 屬性有兩個(gè)值：ltr 和 rtl。大多數(shù)情況下，默認(rèn)值是 ltr，顯示從左到右的文本。如果顯示從右到左的文本，應(yīng)使用值 rtl。屬性描述color設(shè)置文本顏色dir

17、ection設(shè)置文本方向。line-height設(shè)置行高。letter-spacing設(shè)置字符間距。text-align對(duì)齊元素中的文本。text-decoration向文本添加修飾。text-indent縮進(jìn)元素中文本的首行。text-shadow設(shè)置文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒(méi)有保留該屬性。text-transform控制元素中的字母。unicode-bidi設(shè)置文本方向。white-space設(shè)置元素中空白的處理方式。word-spacing設(shè)置字間距。CSS 文本實(shí)例：設(shè)置文本顏色本例演示如何設(shè)置文本的顏色。設(shè)置文本的背景顏色本例顏色如何設(shè)置部分文本的背景顏色

18、。規(guī)定字符間距本例演示如何增加或減少字符間距。使用百分比設(shè)置行間距本例演示如何使用百分比值來(lái)設(shè)置段落中的行間距。使用像素值設(shè)置行間距本例演示如何使用像素值來(lái)設(shè)置段落中的行間距。使用數(shù)值來(lái)設(shè)置行間距本例演示如何使用一個(gè)數(shù)值來(lái)設(shè)置段落中的行間距。對(duì)齊文本本例演示如何對(duì)齊文本。修飾文本本例演示如何向文本添加修飾?？s進(jìn)文本本例演示如何縮進(jìn)文本首行?？刂莆谋局械淖帜副纠菔救绾慰刂莆谋局械淖帜浮Ｔ谠刂薪刮谋菊坌斜纠菔救绾谓乖谠刂械奈谋菊坌?。增加單詞間距本例演示如何增加段落中單詞間的距離。CSS 字體CSS 字體屬性定義文本的字體系列、大小、加粗、風(fēng)格（如斜體）和變形（如小型大寫(xiě)字母）。CSS

19、字體系列在 CSS 中，有兩種不同類型的字體系列名稱： 通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（比如 Serif 或 Monospace） 特定字體系列 - 具體的字體系列（比如 Times 或 Courier）除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列： Serif 字體 Sans-serif 字體 Monospace 字體 Cursive 字體 Fantasy 字體指定字體系列使用font-family 屬性定義文本的字體系列。使用通用字體系列如果你希望文檔使用一種 sans-serif 字體，但是你并不關(guān)心是哪一種字體，以下就是一個(gè)合適的聲明：body font-

20、family: sans-serif;這樣用戶代理就會(huì)從 sans-serif 字體系列中選擇一個(gè)字體（如 Helvetica），并將其應(yīng)用到 body 元素。因?yàn)橛欣^承，這種字體選擇還將應(yīng)用到 body 元素中包含的所有元素，除非有一種更特定的選擇器將其覆蓋。指定字體系列除了使用通用的字體系列，您還可以通過(guò) font-family 屬性設(shè)置更具體的字體。下面的例子為所有 h1 元素設(shè)置了 Georgia 字體：h1 font-family: Georgia;這樣的規(guī)則同時(shí)會(huì)產(chǎn)生另外一個(gè)問(wèn)題，如果用戶代理上沒(méi)有安裝 Georgia 字體，就只能使用用戶代理的默認(rèn)字體來(lái)顯示 h1 元素。我們可以

21、通過(guò)結(jié)合特定字體名和通用字體系列來(lái)解決這個(gè)問(wèn)題：h1 font-family: Georgia, serif;如果讀者沒(méi)有安裝 Georgia，但安裝了 Times 字體（serif 字體系列中的一種字體），用戶代理就可能對(duì) h1 元素使用 Times。盡管 Times 與 Georgia 并不完全匹配，但至少足夠接近。因此，我們建議在所有 font-family 規(guī)則中都提供一個(gè)通用字體系列。這樣就提供了一條后路，在用戶代理無(wú)法提供與規(guī)則匹配的特定字體時(shí)，就可以選擇一個(gè)候選字體。如果您對(duì)字體非常熟悉，也可以為給定的元素指定一系列類似的字體。要做到這一點(diǎn)，需要把這些字體按照優(yōu)先順序排列，然后用

22、逗號(hào)進(jìn)行連接：p font-family: Times, TimesNR, New Century Schoolbook, Georgia, New York, serif;根據(jù)這個(gè)列表，用戶代理會(huì)按所列的順序查找這些字體。如果列出的所有字體都不可用，就會(huì)簡(jiǎn)單地選擇一種可用的 serif 字體。使用引號(hào)您也許已經(jīng)注意到了，上面的例子中使用了單引號(hào)。只有當(dāng)字體名中有一個(gè)或多個(gè)空格（比如 New York），或者如果字體名包括 # 或 $ 之類的符號(hào)，才需要在 font-family 聲明中加引號(hào)。單引號(hào)或雙引號(hào)都可以接受。但是，如果把一個(gè) font-family 屬性放在 HTML 的 styl

23、e 屬性中，則需要使用該屬性本身未使用的那種引號(hào)：.字體風(fēng)格font-style 屬性最常用于規(guī)定斜體文本。該屬性有三個(gè)值： normal - 文本正常顯示 italic - 文本斜體顯示 oblique - 文本傾斜顯示實(shí)例p.normal font-style:normal;p.italic font-style:italic;p.oblique font-style:oblique;italic 和 oblique 的區(qū)別font-style 非常簡(jiǎn)單：用于在 normal 文本、italic 文本和 oblique 文本之間選擇。唯一有點(diǎn)復(fù)雜的是明確 italic 文本和 obliqu

24、e 文本之間的差別。斜體（italic）是一種簡(jiǎn)單的字體風(fēng)格，對(duì)每個(gè)字母的結(jié)構(gòu)有一些小改動(dòng)，來(lái)反映變化的外觀。與此不同，傾斜（oblique）文本則是正常豎直文本的一個(gè)傾斜版本。通常情況下，italic 和 oblique 文本在 web 瀏覽器中看上去完全一樣。字體變形font-variant 屬性可以設(shè)定小型大寫(xiě)字母。小型大寫(xiě)字母不是一般的大寫(xiě)字母，也不是小寫(xiě)字母，這種字母采用不同大小的大寫(xiě)字母。實(shí)例p font-variant:small-caps;字體加粗font-weight 屬性設(shè)置文本的粗細(xì)。使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。關(guān)鍵字 100 900 為字體指定了 9 級(jí)

25、加粗度。如果一個(gè)字體內(nèi)置了這些加粗級(jí)別，那么這些數(shù)字就直接映射到預(yù)定義的級(jí)別，100 對(duì)應(yīng)最細(xì)的字體變形，900 對(duì)應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。如果將元素的加粗設(shè)置為 bolder，瀏覽器會(huì)設(shè)置比所繼承值更粗的一個(gè)字體加粗。與此相反，關(guān)鍵詞 lighter 會(huì)導(dǎo)致瀏覽器將加粗度下移而不是上移。實(shí)例p.normal font-weight:normal;p.thick font-weight:bold;p.thicker font-weight:900;字體大小font-size 屬性設(shè)置文本的大小。有能力管理文本的大小在 web 設(shè)計(jì)領(lǐng)域

26、很重要。但是，您不應(yīng)當(dāng)通過(guò)調(diào)整文本大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。請(qǐng)始終使用正確的 HTML 標(biāo)題，比如使用 - 來(lái)標(biāo)記標(biāo)題，使用 來(lái)標(biāo)記段落。font-size 值可以是絕對(duì)或相對(duì)值。絕對(duì)值： 將文本設(shè)置為指定的大小 不允許用戶在所有瀏覽器中改變文本大?。ú焕诳捎眯裕?絕對(duì)大小在確定了輸出的物理尺寸時(shí)很有用相對(duì)大?。?相對(duì)于周圍的元素來(lái)設(shè)置大小 允許用戶在瀏覽器改變文本大小注意：如果您沒(méi)有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。使用像素來(lái)設(shè)置字體大小通過(guò)像素設(shè)置文本大小，可以對(duì)文本大小進(jìn)行完全控制：實(shí)例h1 font-size:60

27、px;h2 font-size:40px;p font-size:14px;在 Firefox, Chrome, and Safari 中，可以重新調(diào)整以上例子的文本大小，但是在 Internet Explorer 中不行。雖然可以通過(guò)瀏覽器的縮放工具調(diào)整文本大小，但是這實(shí)際上是對(duì)整個(gè)頁(yè)面的調(diào)整，而不僅限于文本。使用 em 來(lái)設(shè)置字體大小如果要避免在 Internet Explorer 中無(wú)法調(diào)整文本的問(wèn)題，許多開(kāi)發(fā)者使用 em 單位代替 pixels。W3C 推薦使用 em 尺寸單位。1em 等于當(dāng)前的字體尺寸。如果一個(gè)元素的 font-size 為 16 像素，那么對(duì)于該元素，1em 就等于 16 像素。在設(shè)置字體大小時(shí)，em 的值會(huì)相對(duì)于父元素的字體大小改變。瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16