第七十二节，文本样式
文本樣式
?
學習要點：
1.字體總匯
2.字體設置
3.Web字體
本章主要探討HTML5中CSS文本樣式，通過文本樣式的設置，更改字體的大小、樣式以及文本的方位。
?
一．字體總匯
本節課，我們重點了解一下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文本樣式來修改字體的大小、樣式以及形態。
?
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?????????????? 表示如果以小型大寫狀態，讓它恢復小寫狀態。
???????? small-caps???????????? ? ?讓小寫字母以小型大寫字母顯示。
p {font-variant: small-caps; }<p>這是一段文本html</p>?
font-style設置字體是否傾斜。
? ? ? ? ? ? ? ? ?值??????????????????????????????? ?說明
????????????? normal ? ? ? ? 表示讓傾斜狀態恢復到正常狀態。
????????????? italic?????????? 表示使用斜體。
???????????? oblique?????????? ??表示讓文字傾斜。區別在沒有斜體時使用。
.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使用指定字體名稱。這里使用的字體是瀏覽者系統的字體。有時為了兼容很多瀏覽者系統的字體，可以做幾個后備字體。?
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??????????? ?將已被轉換大小寫的值恢復到默認狀態
??????????? 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>?
總結
以上是生活随笔為你收集整理的第七十二节，文本样式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SFB 项目经验-04-共存迁移-Lyn
- 下一篇： C语言OJ项目参考(2399)求倒数和