文字排版之font的使用
1.10.1字型大小設定font-size （1em=16px）
其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。
可選引數值：xx-small | x-small | small | medium | large | x-large |xx-large|smaller | larger
一般頁面中：12px 14px 12cm
1em
1.10.2設定字型font-family使用font-family設定字型時，需要注意以下幾點：
Ø 各種字型之間必須使用英文狀態下的逗號隔開。
Ø 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號。當需要設定英文字型時，英文字型名必須位於中文字型名之前。
Ø 如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
Ø 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示。
10.3字體系列
襯線體：字型有一些修飾的東西，讓字型變的美觀。
非襯線體：沒有修飾。
font-famliy: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;
v 前面的字型都查詢失敗後，在系統中找一種sans-serif字型作為預設字型。
注意順序，如果把sans-serif放前面去，後面的都失效了。1.10.4設定字型顏色
通過color屬性可以設定字型的顏色。
Color: red;
建議最好使用十六進位制的方式來寫
1.10.5設定字元的間距
letter-spacing屬性用於定義字間距，所謂字間距就是字元與字元之間的空白。其屬性值可為不同單位的數值，允許使用負值，預設為normal。
可以設定連續漢字（漢字間沒有空格）的間距，也可以設定英文字母之間的間距。
letter-spacing: 10px;
1.10.6設定單詞間距
word-spacing屬性用於定義英文單詞之間的間距。也可以設定漢字中出現斷字的距離（比如：文字間出現空格等）。
1.10.7玩轉行高
行高的CSS定義：行高是兩行文字基線的距離。實際上就是：文字的高度+一倍的行距。
一行文字的高度正好是： 0.5倍行距+ 文字的高度 + 0.5倍行距
四線：
文字頂端的線，稱為頂線。
中線：穿過x中心的線為中線。
小寫X字母底部的線為基線。
文字底部的線為底線。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>27行高的練習</title>
<style>
* {
padding: 0; margin: 0;
}
p.demo {
height: 100px; /*這裡的height是塊狀標籤p的高度*/
line-height: 100px; /*這裡的height是塊狀標籤p中文字的行高的高度，包括行距和文字自身的高度*/
text-align: center;
font-size: 40px;
background-color: silver;
}
.wrap {
font: 16px "黑體";
background-color: green;
}
.wrap p {
background-color: red;
/*font: 20px/1.5em "宋體"; */ /* 此時行高是：30px= 20*1.5 */
/*font: 20px/1.5 "宋體"; */
font: 20px/40px "宋體";/*
20px 是字型大小，40px是行高大小*/
font:20px/40px 等於 font-size:20px;line-height:40px; 那麼此時行距是40-20=20px
但這麼寫有時候相容性不太好，雖然第二種寫法程式碼量比較多，但比較穩定，建議還是用第二種寫法
}
</style>
</head>
<body>
<p class="demo">
傳智播客前端與移動開發學院
</p>
<div class="wrap">
<div>我是父div的文字內容</div>
<p>
我是子段落標籤的文字
</p>
我是父div的文字內容
</div>
</body>
</html>
1.10.8text-decoration:文字裝飾
text-decoration屬性用於設定文字的下劃線，上劃線，刪除線等裝飾效果，其可用屬性值如下：
<s>刪除線</s>
none：沒有裝飾（正常文字預設值）。
underline：下劃線。
overline：上劃線。
line-through：刪除線
1.10.9text-align:水平對齊方式text-align屬性用於設定文字內容的水平對齊，相當於html中的align對齊屬性。其可用屬性值如下：
left：左對齊（預設值）
right：右對齊
center：居中對齊
1.10.10text-indent:首行縮排
text-indent屬性用於設定段落首行文字的縮排，只能設置於塊級標籤。其屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%，允許使用負值, 建議使用em作為設定單位。
1.10.11空白符的處理：
Normal：正常的顯示，如果寬度不夠進行折行顯示。
Nowrap：即使超過盒子的寬度，文字也不進行換行顯示。
Pre：寫html程式碼的時候是什麼樣式的，顯示就顯示成什麼樣的。
關於自動換行的處理
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>自動換行的處理</title>
<style>
div {
border: 1pxsolid red;
background-color:blue;
width: 100px;
height: 400px;
color: #fff;
/*word-break:break-all; */ /*可以把一個單詞放到兩行中，充分利用行的空間*/
word-break:keep-all;
}
</style>
</head>
<body>
<div>
I am itcast teacher theather theather theather
http://www.itcast.cn/i/id/ljljljj
</div>
</body>
</html>
