# 認識CSS#5 text styling
###### tags: `CSS`

## [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) - 字體大小

### [UNIT](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
字體的大小單位，有分成 Absolute lengths 跟 Relative lengths
<font color='red'>**網頁預設的字體大小是 16px**</font>
常見的單位分類:
Absolute lengths : px、cm
relative lengths : rem 、 vw 、 vh 、 em

#### Unit - rem
根據瀏覽器瀏覽器的字體大小設定，在乘上倍數
EX : 瀏覽器預設 16px ， 2rem 就等於 2*16 ， 所以字體是 32px

    p{
        font-size:2rem;
    }

#### Unit - vw vh
vw => viewport width ， 螢幕可視範圍高度的百分比
vh => viewport height ， 螢幕可是範圍寬度的百分比
[EX ](https://codepen.io/binlandz123/pen/zYPNjmO) : 這兩個單位的使用上和百分比很類似
填100vh和100vw時，意思就是我的這個div要是整個螢幕的可視範圍，
所以你會看到，瀏覽器全部都是黃色的，而且很重要的是，這個區塊會隨著瀏覽器的縮放而改變

<div class="block"></div>

    div .block{
        background-color:yellow;
        width:100vw;
        height:100vh;
    }

#### Unit - %
會抓取你目前的 parent element 的長寬，並乘上百分比得出的長度與寬度
[EX ](https://codepen.io/binlandz123/pen/PoOWeXE) :
parent 這個 div 的寬度為 300px 長度為 150px ，
child這個 div
寬度為 parent width * 0.6 = 180px
長度為 parent height * 0.5 = 75px

<div class="parent">
  <div class="child"></div>
</div>

div.parent{
  background-color: black;
  width:300px;
  height:150px;
}
div.child{
  background-color: pink;
  width:60%;
  height:50%;
}

## [text-align](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align) - 文字擺位
網頁中的文字的置中置左置右
<font color='red'>**網頁預設的文字是置左**</font>

    p{
      text-align: /* center left right*/
    }

## [text-decoration](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration) - 文字裝飾
可以將文字做一些裝飾的東西，像是底線等等
<font color='red'> text-decoration 可以去除 a 連結預設的底線</font>

<p>HELLO</p>

p{
   text-decoration: /*underline line-through ... 其他參考文件*/
}

## [font-family](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family) - 文字字體
可以改變網頁文字的字體，更多字體可以到 [google font](https://fonts.google.com/) 用 link 的方式匯入各種不同的字體

<p>HELLO</p>

p{
   font-family:  cursive /*其他字體參考文件*/;
}

## [font-weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) - 文字粗細
調整文字的粗細

<p>hello!</p>

p{
  font-weight:bold; /*更多粗細設定可以參考文件*/
}

## [text-indent](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-indent) - 文字開頭要留多少空白
分段落時可以設定開頭文字前面要留多少空白

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum sint minima, consequatur possimus quas deleniti suscipit rem maiores quidem enim qui voluptatibus voluptatum aliquam mollitia nulla atque dolorum illum officia?</p>

p{
  font-weight:bold;
  text-indent:30px;
}