## **設計稿的文字設定**
> 字體大小與行高請觀看 [Day11 每日任務](https://hackmd.io/HA9OsNUBTA-_gFkyhP16Mw)
### **font-weight**
可以改變文字的粗細。
使用英文（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)
### **font-style**
預設值為 normal。
`font-style: italic;` 將文字變為斜體。
### **font-family**
>
以下簡單介紹：
通常撰寫字型的時候會在最後將通用字型（像是：sans-serif 無襯線字體）寫上，確保各個裝置都能正確瀏覽。
範例：
```css=
body{
font-family: Castoro, sans-serif;
}
```
> 建議不要使用中文設定（像是：`font-family: "微軟正黑體"`），
> 另外如果字型中間有空格的話要記得使用引號，像是：`font-family: "Microsoft JhengHei"`
>
>可參考課程影片「CSS 字體設定全攻略」。
想載入外部字型的話，可以嘗試使用 [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 載入**
選擇想要載入的字型，以 [Castoro](https://fonts.google.com/specimen/Castoro) 為例。
1.進入 [Google Fonts](https://fonts.google.com/) 官網，搜尋 Castoro
2.在 Styles 區塊選擇需要的文字粗細與斜體，點選下圖按鈕
可以看到右邊會出現已選擇的樣式
<img width="300px" src="https://imgur.com/UjoHZKn.png">
然後下方會**提供兩種方式載入（擇一使用）**
<img width="300px" src="https://imgur.com/xl6c1u0.png">
**使用 `<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=Castoro:ital@0;1&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=Castoro:ital@0;1&display=swap');
```
[CodePen 範例](https://codepen.io/jmimiding4104/pen/abQvKwB)
## 題目
複製此 [CodePen](https://codepen.io/jmimiding4104/pen/mdQeKMK)，練習載入 Google Fonts **Castoro** 字型
（需載入 Regular / 斜體 樣式）
### 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
https://codepen.io/jmimiding4104/pen/abQvKZZ
-->
### 回報區
---
| # | Discord | CodePen / 答案 |
|:-:|:-:|:------------------------------------------------------------:|
| 00 | 博派變形金剛#0959 | [Codepen](https://codepen.io/chan-chen/pen/vYQRxpr) |
| 01 | Eden.C | [Codepen](https://codepen.io/iseden/pen/VwVyWvp)|
| 02 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/PoxEjPQ) |
| 03 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/oNQpwjY) |
| 04 | Morning#7336 | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/bGQaREj) |
| 05 |hebin.|[Codepen](https://codepen.io/landyhsiao776/pen/yLQpXJW)|
| 06 |Moreene|[CodePen](https://codepen.io/Moreene/pen/MWzroYR)|
| 07 |billy_ti|[CodePen](https://codepen.io/Ti-Show/pen/rNQpweN)|
| 08 |pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/KKrZqME)|
| 09 |cest_jessie|[CodePen](https://codepen.io/itsjessiechen/pen/ExOoXPj)|
| 10 |Yu|[CodePen](https://codepen.io/yuch3n_chen/pen/abQEwWZ)|
| 11 | Qi-Hua | [Codepen](https://codepen.io/emily40830/pen/jOQYwwR) |
| 12 | townyuan | [Codepen](https://codepen.io/townyuan/pen/QWJagvo)|
| 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/BaGJZZO) |
| 14 | m_m | [Codepen](https://codepen.io/minnn7716/pen/vYQpZJW) |
| 15 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/vYQpZWp) |
| 16 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/dyQJRJz) |
| 17 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/zYMpzwr) |
| 18 | 慈玲#8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/XWyVgEd)|
| 19 | runweiting | [Codepen](https://codepen.io/weiting14/pen/vYQpZRd) |
| 20 | Vic_liou | [Codepen](https://codepen.io/allenliou-java/pen/LYXeLmL) |
| 21 | 阿榮#8277 | [Codepen](https://codepen.io/codeitaday/pen/yLQpXjL) |
| 22 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/abQEwGB) |
| 23 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/MWzroVY) |
| 24 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/YzRYQVr) |
| 25 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/jOQYwpg) |
| 26 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/bGQaRjZ) |
| 27 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/KKrZqGP) |
| 28 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/BaGJZOv) |
| 29 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/eYQyRoz) |
| 30 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/XWyVgoj) |
| 31 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY) |
| 32 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/yLQpoLO) |
| 33 | .icesam | [Codepen](https://codepen.io/icesam/pen/KKrZvwd) |
| 34 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/PoxEKqg?editors=1100) |
| 35 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/) |
| 36 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/OJazjBV) |
| 37 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/GRwyvPR) |
| 38 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/NWEXvaG?editors=1100) |
| 39 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/vYQpJbo) |
| 40 | Cura | [Codepen](https://codepen.io/curalin/pen/eYQyGOr) |
| 41 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/ZEmvXYx) |
| 42 | Uli | [Codepen](https://codepen.io/uli1313/pen/ExOowad) |
| 43 | Martin | [Codepen](https://codepen.io/markyourpage/pen/RwqxLRW) |
| 44 | MKL | [Codepen](https://codepen.io/Code-My/pen/rNQpGjq) |
| 45 | Ting.66 | [Codepen](https://codepen.io/Ting66/pen/wvQpree?editors=1100) |
| 46 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/PoxEJEp) |
| 47 | PayRoom | [Codepen](https://codepen.io/water38198/pen/rNQpGdP) |
| 47 | peggydbc1217 | [Codepen](https://codepen.io/peggydbc1217/pen/LYXezrE) |
| 48 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/qBQpPLd) |
| 49 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/GRwyMPm) |
| 50 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/KKrZXxB?editors=1100) |
| 51 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/PoxEOYO) |
| 52 | SmallP | [Codepen](https://codepen.io/smallp/pen/XWyVzdW) |
| 53 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/yLQpPgd) |
| 54 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/MWzrOXY) |
| 55| yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/zYMpPMo) |
| 56 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/qBQpVGP) |
| 57 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/zYMpPgZ) |
| 58 | 阿沁#8176 | [Codepen](https://codepen.io/a8322342/pen/ZEmvvXK) |
| 59 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/GRwyyyb) |
| 60 | shcopy | [Codepen](https://codepen.io/shcopy/pen/RwqxLdp) |
| 61 | Long | [Codepen](https://codepen.io/Loonng/pen/GRwyQEq) |
| 62 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/gOQovJx) |
| 63 | WA | [Codepen](https://codepen.io/ldddl/pen/QWJamLV) |
| 64 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/poQpLdX) |
| 65 | awei| [Codepen](https://codepen.io/hong-wei/pen/eYQyrPe?editors=1100) |
| 66 | yuling#1634 |[Codepen](https://codepen.io/igzdflpu/pen/WNYdJWo)|
| 67 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/RwqxJWN) |
| 68 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/xxQpzVM) |
| 69 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/oNQpyPX?editors=1100) |
| 70 | Randy | [Codepen](https://codepen.io/landy510/pen/vYQpaLm?editors=1100) |
| 71 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/QWJaOmR?editors=1111) |
| 72 | wind | [Codepen](https://codepen.io/wind7y/pen/KKrZBrP) |
| 73 | 狸貓 | [Codepen](https://codepen.io/tanuki320/pen/GRwyXWe) |
| 74 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/mdQpGxY) |
| 75 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/jOQYvgm) |
| 76 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/poQpxPa) |
| 77 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/LYXegwG) |
| 78 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/rNQpQyN) |
| 79 | 棠棠 | [Codepen](https://codepen.io/bobo52400/pen/QWJaJrP) |
| 80 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/gOQoZOZ) |
| 81 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/PoxEXmv) |
| 82 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/KKrZbeN) |
| 83 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/OJazdYx) |
| 84 | Lesly#1279 | [Codepen](https://codepen.io/LeslyChang/pen/NWEXmqQ) |
| 85 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/zYMpazy) |
| 86 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/KKrZjYP) |
| 86 | 0naomi0 | [Codepen](https://codepen.io/0Naomi0/pen/vYQporP) |
| 87 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR) |
| 88 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/WNYMeBz) |
| 89 | rjjq | [Codepen](https://codepen.io/rjjq/pen/eYQVYQp) |
| 90 | 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/zYMRxYN) |
| 91 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/PoxQwyY) |
| 92 | Chung#5786 | [Codepen](https://codepen.io/fotdclxz-the-encoder/pen/bGQLdWq) |
| 93 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/qBQxObb) |
| 94 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/dyQdGWK?editors=1100) |
| 95 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/abQqdMG) |
| 96 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/dyQdOLY) |
| 97 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/gOQvoBN) |
| 98 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/NWEyygp) |
| 99 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/eYQVrmJ) |
| 100 | Celine#6773 | [Codepen](https://codepen.io/celinephoebe/pen/YzReLNv) |
| 101 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/vYQdjvb) |
| 102 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/wvQyjLa) |
| 103 | .ztion | [Codepen](https://codepen.io/ztion/pen/YzRevZm) |
| 104 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/gOQvdad) |
| 105 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/WNYMYgY) |
| 106 | bbbear#7545 | [Codepen](https://codepen.io/Bearice/pen/xxQWbZg) |
| 107 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/yLQKNoz)|
| 108 | green760223 | [Codepen](https://codepen.io/lawrence-yi-hsuan-chuang/pen/rNQdLZB) |
| 109 | peggy#3169 | [Codepen](https://codepen.io/peggylai/pen/eYQMBKr?editors=1100) |
| 110 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/WNYzoLO) |
| 111 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/gOQegag?editors=0100) |
| 112 | stoos_1369 |[Codepen](https://codepen.io/Stooss/pen/xxQWzjy)|
| 113 | KuoMin |[Codepen](https://codepen.io/KuoMin/pen/zYMWaXm)|
| 114 | FanJJ#8061 |[Codepen](https://codepen.io/yfchenn/pen/NWEYoGq)|
| 115 | 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/BaGrerj)|
| 116 | ryanchiang_ |[Codepen](https://codepen.io/ryanchiang/pen/YzRLyRp)|
| 117 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/vYQjrjM) |
| 118 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/QWJQZLK) |
| 119 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/WNYJLbK) |
| 120 | Eason#7884 | [Codepen](https://codepen.io/ASLEO/pen/RwqymJO) |
| 121 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/yLQEJxE) |
| 122 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/ExORZQr) |
| 123 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/abQKWqV) |
| 124 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/VwVBGOp) |
| 125 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/OJawrLb) |
| 126 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/ZEmMEZx) |
| 127 | EY | [Codepen](https://codepen.io/EY-chen/pen/VwVGWBR) |
| 128 | celia9182 | [Codepen](https://codepen.io/celia01/pen/ZEmqEve) |
| 129 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/wvQYNmX?editors=1100) |
| 130 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/KKrGEKO) |
| 131 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/YzRREgJ) |
| 132 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/poQQqXp) | 133 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/PoxVwbg) |
| 133 | albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/KKrEjXB) |
| 134 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/MWzxNQw) |
| 135 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/GRwbWwO) |
|136|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/dyQxQXK)|
| 137 | lin_lion | [Codepen](https://codepen.io/Lion-Lin/pen/JjegqLE?editors=1100) |
| 138 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/poqeYoq) |
| 139 | Mia小福#4473 | [Codepen](https://codepen.io/a0950271/pen/VwqyBMq) |
| 140 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/bGZGKmW) |
- 快速複製格式：
```markdown!
| 0 | user | [Codepen]() |
```
Sign in via Facebook
Sign in via X(Twitter)
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Connect another wallet