# DAY3 - 優化文字排版的設定。 line-height、text-indent 等

### 增加瀏覽者使用上的體驗:

1. 假設來講，今天有一段文字，大概是30個單字好了:

// lorem30

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci ad
      perferendis officiis eligendi voluptate. Ab officiis dolor est quos,
      voluptate nihil error ratione provident suscipit, temporibus cupiditate
      quia rem deserunt!
    </p>

### 初次設定 CSS 中的網頁字型 - font-family :

p {
     // 根據網頁使用者的電腦所安裝的字型，依序去做套用:
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

### 設定文字大小 / font-size、 設定行距 / line-height:

- `line-height`: 則會根據類別初始大小，然後乘上數值，產生其間距。

  font-size: 16px;
  line-height: 1.5; // 1.5 = 16px * 1.5 = 24px


---

### 中文網站常用之語法，空兩格 / text-indent:

- 根據選擇器之標籤文字大小而定，乘上2 即可:


p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-indent: 32px;
}

### 延伸學習 - text-direction:

[MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)

### 小知識，參考其他人的網頁設計:

- 使用右鍵，檢查:

即可透過游標指定目標選擇器，瀏覽其 CSS 撰寫之樣式。

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章`