HTML5權威指南筆記：22-設置文本樣式

1 應用基本文本樣式

1.1 對齊文本

屬性	說明	值
text-align	指定文本塊的對齊方式	start end left right center justify
text-justify	如果text-align屬性使用了justify值, 則該值會用來指定對齊文本的規則	見下面

text-justify屬性的值：

1. auto：瀏覽器選擇對齊規則，這是最簡單的方法，不過，不同瀏覽器之間的呈現方式會有微小差別。
2. none：禁用文本對齊。
3. inter-word：空白分佈在單詞之間，適用於英語等詞間有空的語言。
4. inter-ideograph：空白分佈在單詞、表意字之間， 且文本兩端對齊， 適用於漢語、日文和韓文等語言。
5. inter-cluster：空白分佈在單詞、字形集的邊界，適用於泰文等無詞間空格的語言。
6. distribute：空白分佈在單詞、字形集的邊界，但連續文本或者草體除外。
7. kashida：通過拉長選定字符調整對齊方式（僅適用於草體）。

1.2 處理空白

whitespace屬性的值：
normal：默認值，空白符被壓縮，文本行自動換行。
nowrap：空白符被壓縮，文本行不換行。
pre：空白符被保留，文本只在遇到換行符的時候換行，這跟pre元素（參見第8章）的效果一樣。
pre-line：空白符被壓縮，文本會在一行排滿或遇到換行符時換行。
pre-wrap：空白符被保留，文本會在一行排滿或遇到換行符時換行。

例子：

white-space: pre-line;

1.3 指定文本方向

direction: ltr;/*從左到右*/
direction: rtl;/*從右到左*/

1.4 指定單詞、字母、行之間的間距

屬性	說明	值
letter-spacing	設置字母之間的間距	normal ＜長度值＞
word-spacing	設置單詞之間的間距	normal ＜長度值＞
line-height	設置行高	normal ＜數值＞ ＜長度值＞ <%>

例子：

word-spacing: 10px;
letter-spacing: 2px;
line-height: 3em;

1.5 控制斷詞

word-wrap屬性告訴瀏覽器當一個單詞的長度超出包含塊的寬度時如何處理。
word-wrap屬性的值：
normal：單詞不斷開，即使無法完全放入包含塊元素。
break-word：斷開單詞，使其放人包含塊元素。

例子：

word-wrap: break-word;

1.6 首行縮進

屬性	說明	值
text-indent	設置文本首行的縮進	＜長度值＞ <%>

例子：

text-indent: 15%;

2 文本裝飾與大小寫轉換

屬性	說明	值
text-decoration	爲文本塊應用裝飾效果	none underline overline line-through blink
text-transform	爲文本塊轉換大小寫	none capitalize uppercase lowercase

例子：

text-decoration: line-through;
text-transform: uppercase;

3 創建文本陰影

屬性	說明	值
text-shadow	爲文本塊應用陰影	<h-shadow> <v-shadow> <blur> <color>

h-shadow和v-shadow：分別指定陰影的水平偏移和垂直偏移，用長度值表示。
blur：是一個長度值，定義了陰影的模糊程度。
color：指定陰影的顏色。

例子：

text-shadow: 0.1em .1em 1px lightgrey;
text-shadow: 5px 5px 20px black;

4 使用字體

屬性	說明	值
font-family	指定文本塊採用的字體名稱	見4.1
font-size	指定文本塊的字體大小	見4.2
font-style	指定字體樣式	Normal italic oblique
font-variant	指定字體是否以小型大寫字母顯示	Normal smallcaps
font-weight	設置字體粗細	Normal bold bolder lighter 100~900之間的數字
font	在一條聲明中設置字體的簡寫屬性	見下面格式

font格式：

font : <font-style> <font-variant> <font-weight> <font-size> <font-family>

4.1 選擇字體

通用字體系列：serif、sans-serif、cursive、fantasy、monospace

例子：

/*瀏覽器從字體列表中的第一種開始嘗試，直到發現合適的字體爲止
所以這裏如果沒有HelveticaNeue Condensed字體就會使用monospace*/
font-family: "HelveticaNeue Condensed", monospace;

4.2 設置字體大小

font-size屬性的值:

值	說明
xx-small x-small small medium large x-large xx-large	設置字體大小。瀏覽器會決定每個值代表具體大小。不過，從上到下逐漸增大是有保證的
smaller larger	設置字體相對於父元素字體的大小
<length>	使用css長度值精確設置字體大小
<%>	將字體大小表示爲父元素字體大小的百分數

例子：

font-size: medium;

4.3 設置字體樣式和粗細

例子：

font-weight: bold;/*詳細值見4節表

5 使用Web 字體

例子：

@font-face {
    /*font-family屬性定義字體名稱，用來引用要下載的字體；*/
    font-family: 'MyFont';
    /*font-style和font-weight屬性告訴瀏覽器如何設置Web字體的樣式和粗細；*/
    font-style: normal;
    font-weight: normal;
    /*src屬性用來指定字體文件的位置*/
    src: url('http://titan/listings/MyFont.woff');
}

* {
    /*使用web字體*/
    font-family: MyFont;
}