Html5與Css3Web字的屬性（六）

web字號

px（）
百分比（較常用）
em（最常用）：一般1em=16px，相對單位。以父元素作參照系,父元素大小是不確定的

body{
    font-size:100%;    /*父元素默認爲16px*/
}
h1{
    font-size:2.1875em; /*35px/16px*/
}

css3新增：rem，以根元素爲參照系，根元素大小是確定的

html{
    font-size:100%;     /*通常爲16px*/
}
h1{
    font-size:2.1875rem; /*35px/16px*/
}

使用關鍵字：xx-small、x-small、small、large、x-large、xx-large、

行高

line-hight：n；
n是數字（最常用方法），與字體的乘積爲行高
n等於div高度，可使文字垂直居中

混合屬性

font設置步驟
前三順序隨意：
字型（normal、italic/oblique）
粗細（normal、bold、bolder、lighter、100~900的倍數）
取消或設置小型大寫字母（normal、small-caps）
按順序：
字體大小
/行高
空格 優先次序輸入字體系列，以“，”分隔

.p{
    font:italic small-caps bold .875em/1.3 "Palayino Linotype",Palatino,serif;
} 
/**斜體，小型大寫字母，加粗，字號，行高，字體類型、備選字體/

設置背景

背景圖片： background-image：url(01.png)
是否重複：background-repeat：repeat-x/repeat-x/no-repeat/repeat(默認)
起始位置： background-position：100px 100px;(或者top（頁面位置）,center（顯示位置）)
是否滾動：background-attachment：fixed/scroll(默認)/local
css3新增
background-clip：border-box(默認)
background-origin:padding-box(默認)
都接受相同的值：content-box包含內容，padding-box包含內容和內邊距
background-size
contain：在顯示圖像完整寬高的情況下，儘可能的擴大圖像的尺寸。背景圖像可能不會填充整個背景區域
cover：在填充元素整個背景區域的情況下，讓圖像儘可能地小。圖像的一部分可能會超出元素的範圍，因而不可見
px、百分比或auto

控制間距

字間距：單詞之間
word-spacing：0.4em
字偶距：字母之間
letter-spacing：0.4em

添加縮進

text-indent：2em
默認情況下對em、strong、cite等內聯元素沒有效果
僅適用塊級元素。設置爲dispay：block；或display：inline-block變爲行內元素，就可以強制爲其應用text-indent屬性
將text-index設爲負值，添加padding屬性可防止文字跑到瀏覽器左邊界
可繼承

水平對齊文本

text-align：justify 文本兩端對齊
僅適用塊級元素。設置爲dispay：block；或display：inline-block變爲就可以強制爲其應用text-indent屬性

垂直對齊文本

vertical-align:middle居中

文本大小寫轉換

text-transform
uppercase：大寫
lowercase：小寫
none：用於消除繼承
capitalize：每個單詞首字母都大寫

小型大小寫

font-variant
使用：samll-caps
取消：none

換行

text-wrap：normal；

裝飾文本

text-decoration
underline：下劃線
overline：上劃線
line-through：刪除線
none：沒有

a:link{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}

設置空白屬性

white-space
pre：瀏覽器顯示原文本中所有空格和回車
nowrap：文本全部顯示在一行。可以手動創建br換行，但還是儘量避免而去用css控制
normal：正常

引用服務端字體

@font-face{
    font-family:WebFont;
    /*ttf:o,otf:t*/
    src:(xxx.ttf)format("truetype");
    font-weight:normal;
}
div{font-famliy:WebFont;}

若客戶端有這個字體

@font-face{
    font-family:MyArial;
    src:local("Arial"),/*客戶端字體*/
        url("xxx.otf");/*服務端字體*/
}
div{font-famliy:MyArial;}

修改字體種類而保持尺寸一致

font-size-adjust
aspect=height/字體大小
瀏覽器實際顯示的aspect=（實際使用的aspect/修改前aspect）/當前字體尺寸