文本樣式

?

學習要點：
1.字體總匯
2.字體設置
3.Web字體

本章主要探討HTML5中CSS文本樣式，通過文本樣式的設置，更改字體的大小、樣式以及文本的方位。

?

一．字體總匯
本節(jié)課，我們重點了解一下CSS文本樣式中字體的一些設置方法，樣式表如下：

? ? ? ??屬性名???????????????????????? 說明 ? ? ? ? ? ? ? ? ? ? ? ? ?　　　　　　　　CSS版本

??????? font-size????? 　　 ??　　設置字體的大小 ? ? ? ? ? ? ? ? ? ? ? ?　　　　1

?????? font-variant?　　?　　 ?? 設置英文字體是否轉換為小型大寫 ? ? ? ? ? ? 1

??????? font-style???? 　　 ?　　?設置字體是否傾斜 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1

?????? font-weight???? 　　　　 ?設置字體是否加粗 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1

?????? font-family???? 　　　　 ??設置font字體?????????????????????????????????? 　1

?????????? font??????? 　　　　　　設置字體樣式復合寫法 ? ? ? ? ? ? ? ? ? ? ? ? ? 1 ~ 2

??????? @font-face???? 　　　　?設置Web字體 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3

?

二．字體設置
我們可以通過CSS文本樣式來修改字體的大小、樣式以及形態(tài)。

?

font-size?設置字體大小

? ? ? ? ? ? ? ? 值???????????????????????????????? 說明

???????????? xx-small　　　　　　　　　?設置字體大小。每個值從小到大的固定值

???????????? x-small

????????????? small

????????????? medium

????????????? large

???????????? x-large

????????? 　xx-large ? ? ? ? ? ? ? ? ? ? ? ? ??設置字體相對于父元素字體的大小

? ? ? ? ? ? ?smaller ? ? ? ? ? ??

? ? ? ? ? ? ?larger

? ? ? ? ? ? ?數字+px?????????????? 　　　　 ??使用CSS像素長度設置字體大小

? ? ? ? ? ? ?數字+%???????????????　　　　? ? 使用相對于父元素字體的百分比大小

?

?設置字體大小。每個值從小到大的固定值

/*從小到大的固定值*/ .a{font-size: xx-small; } .b{font-size: x-small; } .c{font-size: small; } .d{font-size: medium; } .e{font-size: large; } .f{font-size: x-large; }<p class="a">這是一段文本</p> <p class="b">這是一段文本</p> <p class="c">這是一段文本</p> <p class="d">這是一段文本</p> <p class="e">這是一段文本</p> <p class="f">這是一段文本</p>

設置字體相對于父元素字體的大小

/*設置字體相對于父元素字體的大小*/ .a{font-size:xx-large; } .b{font-size:smaller; } .c{font-size:larger; }<p class="a">這是一段文本</p> <p class="b">這是一段文本</p> <p class="c">這是一段文本</p>

使用CSS像素長度設置字體大小

?

/*使用CSS像素長度設置字體大小*/ p {font-size: 50px; }<p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p>

?

使用相對于父元素字體的百分比大小【推薦】

/*使用相對于父元素字體的百分比大小*/ p {font-size:200%; }<p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p>

?

font-variant?設置英文字體是否轉換為小型大寫字母顯示

? ? ? ? ? ?值???????????????????????????????????? 說明

?????????? normal??????????????　　　　表示如果以小型大寫狀態(tài)，讓它恢復小寫狀態(tài)。

???????? small-caps????????????　　 ? ?讓小寫字母以小型大寫字母顯示。

p {font-variant: small-caps; }<p>這是一段文本html</p>

?

font-style設置字體是否傾斜。

? ? ? ? ? ? ? ? ?值??????????????????????????????? ?說明

????????????? normal ? ? ? ?　　　　　　表示讓傾斜狀態(tài)恢復到正常狀態(tài)。

????????????? italic?????????? 　　　　　　表示使用斜體。

???????????? oblique?????????? 　　　　 ??表示讓文字傾斜。區(qū)別在沒有斜體時使用。

.a {font-style: italic; } .b{font-style: oblique; }<p class="a">這是一段文本html</p> <p class="b">這是一段文本</p>

?

font-weight?設置字體是否加粗。

??????????????? 值???????????????????????????????? 說明

????????????? normal?????????? 　　　　　　表示讓加粗的字體恢復正常。

??? ???????????bold??????????? 　　　　　　 ?粗體

????????????? bolder?????????? 　　　　　　?更粗的字體

???????????? lighter?????????? 　　　　　　 ?輕細的字體

?????? 100 ~ 900之間的數字? 　　　　 ?600及之后是加粗，之前不加粗

在目前計算機和瀏覽器顯示中，只有bold加粗，其他更粗更細，目前體現不出來。

.a {font-weight: bold; } .b{font-weight: bolder; } .c{font-weight: lighter; } .d{font-weight: 700; }<p class="a">這是一段文本html</p> <p class="b">這是一段文本</p> <p class="c">這是一段文本</p> <p class="d">這是一段文本</p>

?

font-family使用指定字體名稱。這里使用的字體是瀏覽者系統(tǒng)的字體。有時為了兼容很多瀏覽者系統(tǒng)的字體，可以做幾個后備字體。?

p {font-family:楷體,微軟雅黑,宋體; }<p>這是一段文本</p>

font字體設置簡寫組合方式。格式如下：[是否傾斜|是否加粗|是否轉小型大寫]字體大小 字體名稱；

p {font:50px 楷體 ; }<p>這是一段文本</p>

?

三．Web字體，也就是服務器端字體
雖說可以通過備用字體來解決用戶端字體缺失問題，但終究用戶體驗不好，且不一定備用字體所有用戶都安裝了。所以，現在CSS提供了Web字體，也就是服務器端字體。

?我們可以將字體下載放到html工程目錄來使用

@font-face服務器提供字體

@font-face {font-family: abc; /*給字體一個名稱*/src: url('BrushScriptStd.otf'); /*連接字體文件路徑*/ } p{font-family: abc;font-size: 50px; }<p>這是一段html文本</p>

?

文本內容設置總匯

CSS文本樣式中文本內容的一些設置方法，樣式表如下：

??????????? 屬性名???????????????????????? 　　　　說明??????????????????　　　　　　　　? 　CSS版本

?????? text-decoration? 　　　　　　　　 ??裝飾文本出現各種劃線。 ? ? ? ? ? ? ? ? ? ?1

??????? text-transform???? 　　　　　　 ? ??將英文文本轉換大小寫。 ? ? ? ? ? ? ? ? ? ? 1

???????? text-shadow??????　　　　　　　　 給文本添加陰影 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3

????????? text-align?????? 　　　　　　　　 ??設置文本對齊方式 ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1,3

???????? white-space?????? 　　　　　　　　?排版中的空白處理方式 ? ? ? ? ? ? ? ? ? ? ? 1

??????? letter-spacing???? 　　　　　　　　?設置字母之間的間距 ? ? ? ? ? ? ? ? ? ? ? ? ?1

???????? word-spacing????? 　　　　　　　　設置單詞之間的間距 ? ? ? ? ? ? ? ? ? ? ? ? ?1

???????? line-height?????? 　　　　　　　　 ??設置行高?????????????????????????????????? 　 ?1

????????? word-wrap??????? 　　　　　　　　控制段詞?????????????????????????????????? 　 ??3

???????? text-indent ??????　　　　　　　　?設置文本首行的縮進 ? ? ? ? ? ? ? ? ? ? ? ? ? 1

?

文本內容設置

text-decoration設置文本出現下劃線。屬性值如下表

? ? ? ? ? ? ??　值???????????????????????????????? 　說明

?????????????? none??????????? 　　　　　　 ?讓本身有劃線裝飾的文本取消掉

??????????? underline????????? 　　　　　　?讓文本的底部出現一條下劃線

???????????? overline?????????　　　　　　 ? 讓文本的頭部出現一條上劃線

?????????? line-through??????? 　　　　　　讓文本的中部出現一條刪除劃線

????????????? blink??????????? 　　　　　　　?讓文本進行閃爍，基本不支持了

.a{text-decoration: underline; } .b{text-decoration: overline; } .c{text-decoration: line-through; } .d{text-decoration: blink; }<p class="a">這是一段文本</p> <p class="b">這是一段文本</p> <p class="c">這是一段文本</p> <p class="d">這是一段文本</p>

?

text-transform?設置英文文本轉換為大小寫。?

???????????????? 值 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明

?????????????? none??????????? 　　　　　　 ?將已被轉換大小寫的值恢復到默認狀態(tài)

??????????? capitalize???????? 　　　　　　 ?將英文單詞首字母大寫

?????????? ?uppercase????????? 　　　　　 ?將英文轉換為大寫字母

??????????? lowercase?????????　　　　　 ??將英文轉換為小寫字母

.a{text-transform: capitalize; } .b{text-transform: uppercase; } .c{text-transform: lowercase; }<p class="a">gyfygegff</p> <p class="b">kfklwfgiogvik</p> <p class="c">GFHPOIGHWEAP8YG</p>

?

text-shadow?解釋：給文本添加陰影。其中四個值，第一個值：水平偏移；第二個值：垂直偏移；第三個值：陰影模糊度（可選）；第四個值：陰影顏色（可選）。?

.a{text-shadow :5px 5px 3px #ff272d; }<p class="a">gyfygegff</p>

?

text-align指定文本的對齊方式

? ? ? ? ? ? ? ? 值???????????????????????????????? 說明

?????????????? left??????????? 　　　　 ? ? ? ?靠左對齊，默認

????????????? right???????????　　　　　　? 靠右對齊

????????????? center??????????　　　　　　 居中對齊

??????? ???　justify????????????? 　　　　 ??內容兩端對齊，就是文本內容多的時候，保證兩端都是對齊的

? ? ? ? ? ? ? start?????????????? 　　　　 ? ?讓文本處于開始的邊界

????????????? end?????????????? 　　　　　　讓文本處于結束的邊界

start和end屬于CSS3新增的功能，但目前IE和Opera尚未支持。

.a{text-align: left; } .b{text-align: right; } .c{text-align: center; } .d{text-align: justify; }<p class="a">這是一段文本</p> <p class="b">這是一段文本</p> <p class="c">這是一段文本</p> <p class="d">簡介：當梁宇方決意不出席鉑爾曼酒店十五周年慶酒會的時候，他的父親，也是酒店董事長的梁澤，以及總經理梁宇青，正殷殷期盼著能夠在這個酒會上正式將他介紹出來。無心接班的宇方竟然藏身在馬場和分別六年的愛馬Sky馳騁草原。宇青的突然現身馬場令他無所遁行，就這樣被壓回了酒店準備亮相。但宇方仍不甘示弱，仍伺機逃跑… 小歌星杜允兒來到酒店接周年慶的暖場演唱，向天微義不容辭同行來幫忙，兩人倉皇找著</p>

?

white-space?處理空白排版方式。

值 ? ? ? ? ? ? ? ? ? ? ?說明

normal ? ? ? ? ? ? ?默認值，空白符被壓縮，文本自動換行，也就是無論多少個空格會被壓縮顯示一個空格，文本遇到擠壓時自動換行

nowrap ? ? ? ? ? ? 空白符被壓縮，文本不換行，也就是無論多少個空格會被壓縮顯示一個空格，文本遇到擠壓時不自動換行

pre?????????????? 　 空白符被保留，遇到換行符則換行，也就是有多少空格就顯示多少空格，只有回車換行時才換行

pre-line ? ? ? ? ? ?空白符被壓縮，文本會在排滿或遇換行符換行，無論多少個空格會被壓縮顯示一個空格，文本會在排滿或遇回車換行

pre-wrap ? ? ? ? ?空白符被保留，文本會在排滿或遇換行符換行，也就是有多少空格就顯示多少空格，文本會在排滿或遇回車換行

.a{white-space: normal; } .b{white-space: pre; } .c{white-space: pre-line; } .d{white-space: pre-wrap; }<p class="a">這 是一段文本</p> <p class="b">這 是一段文本</p> <p class="c">這 是一段文本</p> <p class="d">這 是一段文本</p>

?

letter-spacing設置文本之間的間距

? ? ? ? ??　　值 ? ? ? ? ? ? ? ? ?說明

??????????? normal????????????? 設置默認間距

??????????? 長度值 ? ? ? ? ? ? ? ?比如：“數字”+“px”

p{letter-spacing: 50px; }<p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p>

?

word-spacing設置英文單子之間的間距

? ? ? ? ? ? ? ? 值 ? ? ? ? ? ? ? ? ? ? 說明

??????????? normal????????????? 設置默認間距

??????????? 長度值 ? ? ? ? ? ? ? ?比如：“數字”+“px”

p{word-spacing: 50px; }<p>dislike vt.consider unpleasant; not like </p>

?

line-height設置段落行高

? ? ? ? ? ? ? ?　值 ? ? ? ? ? ? ? ? ? ? ? ? ? 說明

??????????????? normal??????????????????? 設置默認間距

??????????????? 長度值 ? ? ? ? ? ? ? ? ? ? ?比如：“數字”+“px”

???????????????? 數值 ? ? ? ? ? ? ? ? ? ? ? ?比如：1,2,3

? ? ? ? ? ? ? ? ?%???????????????????? 　 ?比如：200%

p{line-height: 1px; }<p>這是一段文本</p> <p>這是一段文本</p> <p>這是一段文本</p>

?

word-wrap讓過長的英文單詞斷開

?????????????????? 值 ? ? ? ? ? ? ? ? ? ? ? ?說明

??????????????? normal ? ? ? ? ? ? ? ? ? 單詞不斷開

??????????? break-word ? ? ? ? ? ? ? ?斷開單詞

?

text-indent設置文本首行的縮進

? ? ? ? ? ? ? ? 值 ? ? ? ? ? ? ? ? ? ? ? ? ? 說明

? ? ? ? ? ? ? ?normal??????????????????? 設置默認間距

? ? ? ? ? ? ? ?長度值 ? ? ? ? ? ? ? ? ? ? ?比如：“數字”+“px”

p{text-indent: 50px; }<p>簡介：當梁宇方決意不出席鉑爾曼酒店十五周年慶酒會的時候，他的父親，也是酒店董事長的梁澤，以及總經理梁宇青，正殷殷期盼著能夠在這個酒會上正式將他介紹出來。無心接班的宇方竟然藏身在馬場和分別六年的愛馬Sky馳騁草原。宇青的突然現身馬場令他無所遁行，就這樣被壓回了酒店準備亮相。但宇方仍不甘示弱，仍伺機逃跑… 小歌星杜允兒來到酒店接周年慶的暖場演唱，向天微義不容辭同行來幫忙，兩人倉皇找著宴</p>

?

總結

以上是生活随笔為你收集整理的第七十二节，文本样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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