---
# System prepended metadata

title: font & text
tags: [css, html]

---

# 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;
      }
