今天介紹CSS修飾文字及字形的特性

本範例取自維基百科-英超聯賽

以下為圖片及Properties對照關係

text-align A

text-decoration B

letter-spacing C

line-height D

font-weight E

A
A:使用屬性text-align能調整字體排版方式，此處示範置中(center)。
B
B:屬性text-decoration用來給文字加上線條，可以依照需求調整線條位置、顏色、形式，此處為讓標題加上一道橘色波浪底線。
C
C:屬性letter-spacing，可以設定文字間的距離，此處設定為標題間文字間距40畫素(px)。

註:1px = 0.04cm
1cm = 25px
D
D:屬性line-height則能設定行高，示範中將<p>中文字行高調為原本2倍。
E
E:屬性font-weight用來調整文字粗細程度，此處將標題文字調為200(較細)。

最後來看到font-family這個屬性，請見網站，此站列出眾多主流瀏覽器支援的字形種類，所謂的family是指像Sans-serif、Serif、Monospaced等字形的群體，其各自項下都有許多不同的字形，要注意的是並不是所有字形都能在Windows或Mac上支援，網站上貼心地列出了支援比例供開發者參考，請看下圖

F

F-a

F-a:試著將標題字型改成Lucida Grande試試，結果因Windows不支援該字形，無法正常顯示。

F-b

F-b:在屬性font-family後接上: "lucida console",Consolas,monospace;，意指優先選擇顯示字體"lucida console"，若無法顯示則顯示Consolas，最終仍無法正常顯示的話就由瀏覽器從monospace中選擇任一通用字型。

明天進入CSS重要的觀念選擇器(Selectors)