# 🏅 Day 4 - 文字細節設定
只要有運用到文字的部分，都需要依照設計稿來設定相關文字細節（像是：字型、字體大小、行高、字體粗細 等等）
在設計稿中，點選右側「`</>`」icon，會出現設計稿相關設定資訊
<img src="https://hackmd.io/_uploads/SyX0kCZ36.png" width="200">
此時點選文字，會呈現出該文字的設定，即可依照設計稿資訊來設定各文字樣式
## font-size
用於設定**字體大小**，對應設計稿資訊：
<img src="https://hackmd.io/_uploads/rkNvZAZna.png" width="200">
以此為例，需在 CSS 中設定：`font-size: 32px;`
## line-height
用於設定**文字行高**，對應設計稿資訊：
<img src="https://hackmd.io/_uploads/rJevXmRWha.png" width="200">
以此為例，需在 CSS 中設定：`line-height: 48px;`
行高也可以使用倍數方式設定，以此為例：
行高為字體的 1.5 倍（32px * 1.5 = 48px） -> `line-height: 1.5;`
## font-weight
用於設定**文字粗細**，對應設計稿資訊：
<img src="https://hackmd.io/_uploads/rkQEa0Z2p.png" width="200">
使用英文（normal、bold、bolder、lighter）或數字設定。
預設值為 **normal**，也就是 400。
設計稿若是呈現 **Bold**，可以直接設定 `font-weight: bold;` 或是 `font-weight: 700;`
若是 **Medium**，需設定為 `font-weight: 500;`（font-weight 沒有 medium 的值）
其餘常用說法對應的數字可以參考此[連結](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)中對照表「Common weight name mapping」
## font-style
預設值為 normal，通常用於要將文字調整為斜體時使用，
對應設計稿資訊：
<img src="https://hackmd.io/_uploads/ryDRmJzha.png" width="200">
設定 `font-style: italic;` 即可將文字變為斜體
## font-family
用於設定文字字型，對應設計稿資訊：
<img src="https://hackmd.io/_uploads/SJXbQkGna.png" width="200">
語法：
`font-family: 想運用的字體;`
> 通常撰寫的時候，會再將通用字體、系統預設字體（像是：sans-serif 無襯線字體、-apple-system）寫上，依序套用可以使用的字體，確保各個裝置都能正確瀏覽。
> ```css=
> body { /* 通常會在 body 統一設定 */
> font-family: -apple-system, BlinkMacSystemFont, /* 系統預設的字體 */
> 'Segoe UI', Roboto, Ubuntu, 'Droid Sans', /* 系統 UI 字體 */
> Arial, 'Helvetica Neue', sans-serif; /* 通用字體 */
> }
> ```
注意：
建議不要使用中文設定（像是：`font-family: '微軟正黑體'`），
另外如果字型中間有空格的話要記得使用引號，像是：`font-family: 'Microsoft JhengHei'`
想載入外部字型（非系統預設字體）的話，可以嘗試使用 [Google Fonts](https://fonts.google.com/)。
> 若是 Google Fonts 沒有的字型可以看是否能下載到本地放入專案資料夾中使用
>[@font-face](https://developer.mozilla.org/zh-TW/docs/Web/CSS/@font-face) 載入，
> 或是和設計師討論使用 Google Fonts 雲端字型
### Google Fonts 載入
選擇想要載入的字型，以「切版任務作業」提供的設計稿為例，此設計稿的字體有「思源黑體（Noto Sans）、Roboto」
1. 進入 [Google Fonts](https://fonts.google.com/) 官網，搜尋並進入字體頁面
2. 點選右上角「Get Fonts」按鈕
3. 進入已選擇的字型頁面，點選「Get embed code」
4. 左側區塊可以根據需求選擇需要的文字粗細與是否斜體
<img src="https://hackmd.io/_uploads/BkAwOVV3a.png" width="300">
（此設計稿沒有 Roboto Italic 的字體，可以將所有含 Italic 的選項移除）
6. 右側區塊會**提供兩種方式載入（擇一使用）**
＊**使用 `<link>` 方式**：
將整段程式碼貼到 HTML `<head>` 內
範例：
```htmlembedded=
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link href="style.css"> <!-- 自定義的 CSS 檔 -->
</head>
```
若是使用 CodePen，則貼到 HTML 區塊中 `Stuff for <head>`（如下圖）
＊**使用 `@import` 方式**：
則直接在 CSS 最上方加入即可
```css=
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')
```
載入後即可在 CSS 設定：
`font-family: Roboto, 'Noto Sans TC',...;`
題目
---
複製此[模板](https://codepen.io/hexschool/pen/MWxdoaG)，為所有文字調整相關細節
（只需調整 CSS 區塊內 `＊` 的地方，以及需自行載入外部字型）
文字相關樣式可以觀看「切版任務作業」設計稿中的下方圖片區塊
模板與解答皆有載入 CSS Reset 清除瀏覽器預設設定，
使用 Codepen 可直接在 `Settings > CSS > CSS Base > Reset` 設定
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
https://codepen.io/hexschool/pen/jOJRrWx
-->
回報區
---
<!--
將答案貼至下方表格內，格式：
| Discord 暱稱 | [CodePen](連結) |
-->
| Discord | CodePen／答案 |
|:----------:|:--------------------:|
| xxx | [CodePen]() |
Sign in with Wallet
Connect another wallet