# font & text
###### tags: `html`,`css`
## font_style

>預設字體大小為16px

>字體下載到google font，可下載不同字體
1.點要的字體
2.select this style
3.點擊embed複製link並貼上，在設定

- px、em、rem
em：相對單位，每個子元素透過「倍數」乘以父元素的px 值。 rem：相對單位，每個元素透過「倍數」乘以根元素的px 值。
- 字體大小
font-size: 24px;
- 斜體
font-style: italic;
- 設定粗度
font-weight: 700;
- 設定字體變成大寫，句子第一個字較大
font-variant: small-caps;

## text-style

- 設定文字對齊的方式，left、center、right
text-align: center;

- 設定文字畫線的位置，underline、overlibe、line-through
text-decoration: underline;
- 縮排
text-indent: 30px;
- uppercase(全大寫)、lowercase(全小寫)、capitalize(單字第一個字母大寫)
text-transform: capitalize;
- 設定文字陰影
- 水平位移量、垂直位移量、陰影模糊半徑、顏色
- 可以設定多重陰影，中間用逗號隔開
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5), -10px -10px 5px rgba(255, 0, 0, 0.5);
- 英文字母或中文字的間隔
letter-spacing: 5px;
- 單字與單字的間隔，適合英文，中文很難有空格
word-spacing: 10px;
- 行高，可以設定px、em、rem，也可以只設定數字(倍數)
line-height: 30px;

- break-word 過長的單字瀏覽器會自動判斷換行，避免一江春水向東流的問題
word-wrap: break-word;

- break-all(允許單字的字母換行，不一定要完整的單字)
keep-all(只能在半形空格或連字符號處換行)
word-break: break-all;
- white-space保留空格
white-space: pre;

## 偽元素
>設定連結狀態
順序不能顛倒，LoVe-HAte

- 初始狀態
a:link{
color:red;
text-decoration: none;
}
- 拜訪過的狀態
a:visited{
color:gray;
}
- 滑鼠移入狀態
a:hover{
color:green;
text-decoration: underline;
}
- 滑鼠點擊狀態
a:active{
color:darkorange;
}