font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。

絕對單位可選參數值：xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title font-size:字號大小 /title 6 7 style type= text/css 8 #p1 {font-size: 14pt;} 9 #p2 {font-size: 16pt;}10 #p3 {font-size: x-small;}11 #p4 {font-size: small;}12 #p5 {font-size: medium;}13 #p6 {font-size: large;}14 #p7 {font-size: xx-large;}15 /style 16 /head 17 body 18 p id= p1 font-size:字號大小 /p 19 p id= p2 font-size:字號大小 /p 20 p id= p3 font-size:字號大小 /p 21 p id= p4 font-size:字號大小 /p 22 p id= p5 font-size:字號大小 /p 23 p id= p6 font-size:字號大小 /p 24 p id= p7 font-size:字號大小 /p 25 /body 26 /html 

font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSSyangshi_10628_1.html' target='_blank'>CSS樣式代碼：

p {font-family: 微軟雅黑 }

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。如果字體名稱包含空格或中文，則應使用引號括起

p {font-family: Times New Roman , 宋體 }

使用font-family設置字體時，需要注意以下幾點：

各種字體之間必須使用英文狀態下的逗號隔開

中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位于中文字體名之前

如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: Times New Roman

盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示

在 CSS 中設置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。為此，在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的。font-family: /5FAE/8F6F/96C5/9ED1 ，表示設置字體為“微軟雅黑”?？梢酝ㄟ^escape() 來得到

escape()用法：

%u5FAE%u8F6F%u96C5%u9ED1這個就是中文字體“微軟雅黑”，其對應的Unicode編碼為“/5FAE/8F6F/96C5/9ED1”，注意需要把%u改成/，否則會出錯

為了更安全的設置，一般會在字體的最后面加上sans-serif，如

p {font-family: Times New Roman , 宋體 , sans-serif }

前面的字體都查找失敗后，在系統中找一種sans-serif字體作為默認字體

注意順序，如果把sans-serif放前面去，后面的都失效了

font-weight屬性用于定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍），有繼承性。

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title font-family:字體 /title 6 7 style type= text/css 8 #p1 {font-weight: normal;} 9 #p2 {font-weight: bold;}10 #p3 {font-weight: bolder;}11 #p4 {font-weight: lighter;}12 #p5 {font-weight: 300;}13 #p6 {font-weight: 800;}14 /style 15 /head 16 body 17 p id= p1 font-size:字號大小 /p 18 p id= p2 font-size:字號大小 /p 19 p id= p3 font-size:字號大小 /p 20 p id= p4 font-size:字號大小 /p 21 p id= p5 font-size:字號大小 /p 22 p id= p6 font-size:字號大小 /p 23 /body 24 /html 

font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic：瀏覽器會使用斜體的字體樣式顯示，如果字體沒有斜體，那么正常顯示字體。

oblique：瀏覽器會讓文字傾斜顯示。

 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title font-style:字體風格 /title 6 7 style type= text/css 8 p.normal {font-style:normal} 9 p.italic {font-style:italic}10 p.oblique {font-style:oblique}11 /style 12 /head 13 body 14 p >
font:綜合設置字體樣式
如果需要同時設置字體的大小，樣式，粗細風格等，那么需要一個一個的設置，像下面這樣
1 style type= text/css 2 p {3 font-size: 20px;4 font-family: /5b8b/4f53 5 font-weight: bold;6 font-style: oblique;7 }8 /style 
那么這是很繁瑣的，這時可以用font來綜合設置字體的相關屬性，其基本語法為
選擇器{font: font-style font-weight font-size/line-height font-family;}
使用font屬性時，必須按上面語法格式中的順序書寫，各個屬性以空格隔開。font-size和font-family的值是必需的。如果缺少了其他值，默認值將被插入，如果有默認值的話。
用font之后的效果
 style type= text/css  p {font: oblique bold 20px /5b8b/4f53 } /style 
CSS文本外觀屬性color:文本顏色
color屬性用于定義文本的顏色，其取值方式有如下3種：
預定義的顏色值，如red，green，blue等。
十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。
RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title color /title 6 7 style type= text/css 8 div {color: red;} 9 p {color: #FF0000;}10 span {color: rgb(255,0,0);}11 /style 12 /head 13 body 14 div 這是一個div /div 15 p 這是一個段落 /p 16 span 這是一個span /span 17 /body 18 /html 
letter-spacing:字間距
letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可為不同單位的數值，允許使用負值，默認為normal。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title letter-spacing /title 6 7 style type= text/css 8 div {letter-spacing: 5px;} 9 /style 10 /head 11 body 12 div 這是一個div /div 13 /body 14 /html 
word-spacing:單詞間距
word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數值，允許使用負值，默認為normal。
word-spacing和letter-spacing均可對英文進行設置，不同的是letter-spacing定義的為字母之間的間距，而word-spacing定義的為英文單詞之間的間距。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title word-spacing /title 6 style type= text/css 7 div {word-spacing: 50px;} 8 /style 9 /head 10 body 11 div 這是一個div div例子，word-spacing屬性對中文無效 /div 12 /body 13 /html 
line-height:行間距
line-height屬性用于設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際工作中使用最多的是像素px。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title line-height /title 6 style type= text/css 7 div {line-height: 50px;} 8 /style 9 /head 10 body 11 div 這是一個div /div 12 div 這是一個div /div 13 div 這是一個div /div 14 /body 15 /html 
text-decoration:文本裝飾
text-decoration屬性用于設置文本的下劃線，上劃線，刪除線等裝飾效果，其可用屬性值如下：
 s 刪除線 /s 
none：沒有裝飾（正常文本默認值）。
underline：下劃線。
overline：上劃線。
line-through：刪除線。
另外，text-decoration后可以賦多個值，用于給文本添加多種顯示效果，例如希望文字同時有下劃線和刪除線效果，就可以將underline和line-through同時賦給text-decoration。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title text-decoration /title 6 style type= text/css 7 div {text-decoration: underline overline line-through;} 8 /style 9 /head 10 body 11 div 給文字添加下劃線，上劃線，刪除線 /div 12 /body 13 /html 
text-align:水平對齊方式
text-align屬性用于設置文本內容的水平對齊，相當于html中的align對齊屬性。其可用屬性值如下：
left：左對齊（默認值）
right：右對齊
center：居中對齊
 !DOCTYPE html html lang= en head meta charset= UTF-8 title text-align /title style type= text/css div {text-align: right;} /style /head body div 設置文本內容水平右對齊 /div /body /html 
text-indent:首行縮進
text-indent屬性用于設置段落首行文本的縮進，只能設置于塊級標簽。其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作為設置單位。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title text-indent /title 6 style type= text/css 7 div {text-indent: 5em;} 8 /style 9 /head 10 11 body 12 div 13 設置段落首行文本的縮進設置段落首行文本的縮進設置段落首行文本的縮進設置段落首行文本的縮進設置段落首行文本的縮進14 /div 15 /body 16 /html 
white-space:空白符處理
使用HTML制作網頁時，不論源代碼中有多少空格，在瀏覽器中只會顯示一個字符的空白。在CSS中，使用white-space屬性可設置空白符的處理方式，其屬性值如下：
normal：常規（默認值），文本中的空格、空行無效，滿行（到達區域邊界）后自動換行。
pre：預格式化，按文檔的書寫格式保留空格、空行原樣顯示。
nowrap：空格空行無效，強制文本不能換行，除非遇到換行標記 br / 。內容超出元素的邊界也不換行，若超出瀏覽器頁面則會自動增加滾動條。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title white-space /title 6 style type= text/css 7 .pre { 8 white-space: pre; 9 }10 11 .nowrap {12 white-space: nowrap;13 }14 /style 15 /head 16 body 17 div >
word-break:自動換行
自動換行有以下3個可選值
normal 使用瀏覽器默認的換行規則，不打斷單詞顯示。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title word-break /title 6 style type= text/css 7 .break-all {word-break: break-all;} 8 .keep-all {word-break: keep-all;} 9 /style 10 /head 11 body 12 div >
word-wrap:單詞換行
該屬性的作用是允許長單詞或 URL 地址換行到下一行normal 
normal 只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word 在長單詞或 URL 地址內部進行換行。幾乎得到了瀏覽器的支持
 1 !DOCTYPE html 2 html lang= en 3 head 4 meta charset= UTF-8 5 title word-wrap /title 6 style type= text/css 7 div {word-wrap: break-word;} 8 /style 9 /head 10 body 11 div 12 This attribute is used to allow long words or urls to be changed to the next line of normal13 http://www.xxxxxx.com14 This attribute is used to allow long words or urls to be changed to the next line of normal15 /div 16 /body 17 /html 
以上就是CSS文字排版需要用到的屬性的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。