CSS 字體屬性定義文本的字體系列、大小、加粗、風格（如斜體）和變形（如小型大寫字母）font-family控制字體，由於各個電腦系統安裝的字體不盡相同，但是基本裝有黑體、宋體與微軟雅黑這三款字體，通常這樣寫font-family:"黑體", "宋體","Microsoft YaHei"
font-size控制字體大小，我們設置字體大小是設置它的寬度，它的高度一般電腦系統默認字體大小是16px，所以字體大小盡量不要低於16px，1em=16px； font-weight: bold;/*控制字重 一般是100-900 常用lighter(細體) normal（正常）bold加粗 */至於這個font-style，一般默認是normal，也就是正常的，如果說你設置 font-style: italic;斜體話，其實和這個<em></em>的效果是差不多的;文字間的間距用的line-height如果和高度相等話，就是垂直居中了。
通常font字體的簡寫:font:style weight size/line-heigt font-family /*要求必須出現的2個是 size與font-family*/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css常用樣式font字體的多種變換</title> 7 <style> 8 div{ 9 font-family: 'Microsoft YaHei';/*微軟雅黑*/ 10 /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */ 11 /*字體加上雙引號或者單引號，當有多個字體的時候，中間逗號分開*/ 12 color:#f90; 13 font-size: 24px;/*控制字體大小*/ 14 font-weight: bold;/*控制字重 常用lighter(細體) normal（正常）bold加粗 */ 15 font-style: italic;/*等同於em*/ 16 line-height: 30px; 17 } 18 /*font字體的簡寫:font:style weight size/line-heigt font-family*/ 19 /*要求必須出現的2個是 size font-family*/ 20 p{ 21 font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 22 letter-spacing: 1px;/*英文字母間距*/ 23 word-spacing: 10px;/*英文單詞間距*/ 24 } 25 P::first-letter{ 26 text-transform: capitalize; 27 }/*第一個字母::first-letter*/ 28 p::first-line{ 29 color:red; 30 }/*第一行::first-line*/ 31 </style> 32 </head> 33 <body> 34 <div>技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界, 35 欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好技術為王世界, 36 欲問青天山頂景色是否獨好技術為王世界,欲問青天山頂景色是否獨好 </div> 37 <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology, 38 I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world, 39 I would like to ask whether the scenery on the top of Qingtian Mountain is the king of the world. Is the scenery good?</p> 40 </body> 41 </html>
關於樣式繼承問題/*與文字有關樣式會被繼承下去*/代碼展示如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <style> 7 p{ 8 font-size: 20px; 9 font-family: 微軟雅黑; 10 color:#f00; 11 font-weight:bold; 12 font-style:italic; 13 word-spacing:15px; 14 } 15 16 </style> 17 </head> 18 <body> 19 <div> 20 <p><span>linux php linux</span></p> 21 <p><span>linux linux php linux</span></p> 22 <p><span>linux linux php linux</span></p> 23 <p><span>linux linux php linux</span></p> 24 </div> 25 </body> 26 </html>