Web前端開發(fā)第9章：文字樣式1本章主要內(nèi)容文本樣式字體樣式文本效果使用服務(wù)器端字體案例：詩歌排版案例：使用服務(wù)器端字體實(shí)現(xiàn)網(wǎng)站圖標(biāo)21.文本樣式由于Web是HTML文檔的集合體，有動態(tài)的元素、靜態(tài)的元素、功能展示的元素，它們的呈現(xiàn)不能夠是雜亂無章的，這就需要對各種文字樣式進(jìn)行排版。排版是對文本樣式進(jìn)行各種操作（例如改變文本的顏色、字符間距、行高、文字對齊方式等，并需實(shí)現(xiàn)文本縮進(jìn)、字體裝飾等內(nèi)容）。CSS的文字樣式可以通過各種屬性的綜合使用實(shí)現(xiàn)各種樣式的文字排版。31.文本樣式41.1屬性1.文本樣式51.2文本顏色：colorcolor屬性規(guī)定文本的顏色。這個顏色還會應(yīng)用到元素的所有邊框，除非被border-color或另外某個邊框顏色屬性覆蓋。6現(xiàn)場演示：案例9-01：文本顏色1.文本樣式71.3縮進(jìn)：text-indenttext-indent屬性規(guī)定文本塊中首行文本的縮進(jìn)。該屬性值可以為像素值、百分比或相對值em，也可以為正值或負(fù)值，如果使用負(fù)值，那么首行會被縮進(jìn)到左邊。8現(xiàn)場演示：案例9-02：文本縮進(jìn)1.文本樣式91.4行高：line-heightline-hight屬性用來設(shè)置行間的距離（行高）。line-height與font-size的計(jì)算值之差在CSS中成為“行間距”，將其值分為兩半，分別加到一個文本行內(nèi)容的頂部和底部，其中可以包含這些內(nèi)容的最小框就是行框。10現(xiàn)場演示：案例9-03：行高1.文本樣式111.5字母間隔：letter-spacingletter-spacing屬性用來定義字符間的空白大小（字符間距）。該屬性定義了在文本字符框之間插入多少空間，由于字符字形通常比其字符框要窄，指定長度值時，會調(diào)整字母之間通常的間隔，normal就相當(dāng)于值為0。12現(xiàn)場演示：案例9-04：字母間隔1.文本樣式131.6水平對齊：text-aligntext-align屬性規(guī)定元素中文本的水平對齊方式。該屬性通過指定行框與某點(diǎn)對齊，來設(shè)置塊級元素內(nèi)文本的水平對齊方式。14現(xiàn)場演示：案例9-05：水平對齊1.文本樣式151.7文本裝飾：text-decorationtext-decoration屬性規(guī)定添加到文本的修飾，修飾的顏色由“color”屬性設(shè)置。16現(xiàn)場演示：案例9-06：文本裝飾1.文本樣式171.8字符轉(zhuǎn)換：text-transformtext-transform屬性用來對文本的大小寫進(jìn)行轉(zhuǎn)換處理。該屬性會改變元素中的字母大小寫，而不管源文本的大小寫。如果值為capitalize，則要對某些字母大寫，但是并沒有明確定義如何確定哪些字母要大寫，這取決于瀏覽器如何識別出各個“詞”。18現(xiàn)場演示：案例9-07：字符轉(zhuǎn)換1.文本樣式191.9空白處理：white-spacewhite-space屬性設(shè)置如何處理元素內(nèi)的空白。該屬性聲明建立布局過程中如何處理元素中的空白符，其中值pre-wrap和pre-line是CSS2.1中新增的。20現(xiàn)場演示：案例9-08：元素空白處理1.文本樣式211.10文字間隔：word-spacingword-spacing屬性用來增加或減少單詞（英文）間的空白（即字間隔）。針對這個屬性，“字”定義為由空白符包圍的一個字符串。如果指定為長度值，會調(diào)整字之間的通常間隔，normal就等同于設(shè)置為0，允許指定負(fù)長度值，這會讓字之間擠得更緊。22現(xiàn)場演示：案例9-09：文字間隔1.文本樣式231.11首字下沉：:first-letterfirst-letter屬性用來實(shí)現(xiàn)文本首字下沉效果，此偽對象僅作用于塊對象。24現(xiàn)場演示：案例9-10：首字下沉2.字體樣式252.1什么是字體文字是網(wǎng)頁中最重要的設(shè)計(jì)元素之一，同時也是網(wǎng)站信息傳遞給用戶的主要載體。在網(wǎng)頁設(shè)計(jì)中，字體是文字的外在形式特征，一些設(shè)計(jì)師為了凸顯不同的設(shè)計(jì)效果，往往選擇不同樣式的字體來進(jìn)行視覺效果設(shè)計(jì)。2.字體樣式262.1什么是字體字體從商業(yè)角度劃分，分為收費(fèi)字體和免費(fèi)字體兩大類。例如在日常生活中常用到的方正系列字體，從方正字庫官網(wǎng)（）可以看到，將方正字體分為：“免費(fèi)字體”、“基礎(chǔ)字體”和“精選字體”三類。免費(fèi)字體：包括方正黑體、方正書宋、方正仿宋、方正楷體。2.字體樣式272.1什么是字體字體從商業(yè)角度劃分，分為收費(fèi)字體和免費(fèi)字體兩大類?；A(chǔ)字體：包括方正超粗黑體、方正宋黑體、方正大黑體、方正細(xì)黑一體、方正中等線體、方正細(xì)等線體、方正粗圓體、方正準(zhǔn)圓體、方正細(xì)圓體、方正報宋體、方正宋三體、方正宋一體、方正大標(biāo)宋體、方正小標(biāo)宋體、方正彩云體、方正琥珀體、方正隸變體、方正隸書體、方正魏碑體、方正行楷體、方正姚體、方正綜藝體。精選字體：包括免費(fèi)字體、基礎(chǔ)字體類以外的其它全部方正字體。如方正蘭亭黑系列、博雅宋系列、正黑系列、倩體系列等。注：基礎(chǔ)字體和精選字體如需使用，需要購買方正字庫授權(quán)。2.字體樣式282.2屬性2.字體樣式292.3字體系列：font-familyfont-family規(guī)定元素的字體系列。font-family可以把多個字體名稱作為一個“回退”機(jī)制。在CSS中，有兩種不同類型的字體系列。通用字體系列：擁有相似外觀的字體系統(tǒng)組合。特定字體系列：具體的字體系列（如黑體、微軟雅黑等）。除了各種特定的字體系列外，CSS定義了5種通用字體系列，分別是Serif字體、Sans-serif字體、Monospace字體、Cursive字體、Fantasy字體。30現(xiàn)場演示：案例9-11：字體系列2.字體樣式312.4字體大?。篺ont-sizefont-size屬性用來定義文本的大小。該屬性值可以為絕對值或相對值。絕對值是將文本設(shè)置為指定的大小，此時不允許用戶在所有瀏覽器中改變文本大小（不利于可用性），絕對大小在確定了輸出的物理尺寸時很有用。相對值是相對于周圍的元素來設(shè)置大小，允許用戶在瀏覽器改變文本大小。32現(xiàn)場演示：案例9-12：字體大小2.字體樣式332.5字體加粗：font-weightfont-weight屬性用來定義字體的粗細(xì)。34現(xiàn)場演示：案例9-13：字體加粗2.字體樣式352.6字體風(fēng)格：font-stylefont-style屬性用來定義字體的風(fēng)格。36現(xiàn)場演示：案例9-14：字體風(fēng)格3.文本效果373.1CSS3新增文本屬性3.文本效果383.2文本溢出：text-overflow在網(wǎng)頁開發(fā)過程中，可能會遇到內(nèi)容溢出而導(dǎo)致網(wǎng)頁變形的情況，通常采用以下兩種方法解決：通過JavaScript截取字符串。網(wǎng)站后臺程序截取一定的字符串將超出寬度的內(nèi)容以省略號（…）顯示。上述的兩種方法都有其不足之處，如中英文計(jì)算字符長度的問題，會導(dǎo)致截取字符串長度無法控制，從而降低程序的通用性。3.文本效果393.2文本溢出：text-overflowCSS3新增了text-ovreflow屬性，使用該屬性可快速地解決內(nèi)容溢出問題。40現(xiàn)場演示：案例9-15：溢出文本3.文本效果413.3文字陰影：text-shadowtext-shadow屬性用來給頁面上的文字添加陰影效果。注：可以對文字設(shè)置多個陰影，只需要為text-shadow屬性設(shè)置多組屬性值即可。42現(xiàn)場演示：案例9-16：文字陰影3.文本效果433.4文本換行瀏覽器自身具有讓文字自動換行的功能，在瀏覽器中顯示文本的時候，會讓文本在瀏覽器或div元素的右端自動實(shí)現(xiàn)換行。對于西方文字來說，瀏覽器會在半角空格或連字符的地方自動換行，而不會在單詞中間突然換行，因此，瀏覽器不能夠給較長的單詞自動換行。對于中文來說，瀏覽器可以在任何一個中文文字后面進(jìn)行換行。3.文本效果443.4文本換行在CSS3中，word-warp屬性可以指定實(shí)現(xiàn)長單詞與URL地址的自動換行。該屬性值有兩種：normal和break-word。normal：默認(rèn)值，表示只允許在斷字點(diǎn)換行。break-word：指定長單詞或URL地址可以自動換行。在CSS3中，word-break屬性可以讓瀏覽器實(shí)現(xiàn)在任意位置的換行。該屬性值有三種：normal、keep-all和break-word。normal：默認(rèn)值，使用瀏覽器默認(rèn)的換行規(guī)則。break-all：允許在單詞內(nèi)換行。keep-all：只能在半角空格或連字符處換行。45現(xiàn)場演示：案例9-17：內(nèi)容換行案例9-18：詞內(nèi)換行4.使用服務(wù)器端字體46在CSS3之前，頁面文字所使用的字體，必須為用戶計(jì)算機(jī)已經(jīng)安裝且能夠正常使用的字體。如果頁面中指定了一種字體，而該字體用戶計(jì)算機(jī)上沒有安裝，則該字體就無法正常顯示。用戶在瀏覽頁面時，該字體會使用默認(rèn)字體替代顯示。47現(xiàn)場演示：案例9-19：不使用服務(wù)器端字體案例9-20：使用服務(wù)器端字體5.案例：詩歌排版48CSS中文字樣式的定義，實(shí)現(xiàn)了對頁面中字體、段落的綜合排版。本案例通過中英文對照的詩歌排版，綜合演示文字樣式的屬性，方便Web前端開發(fā)者了解使用文字排版。49現(xiàn)場演示：案例9-21：