# 🏅 Day 13 - 文字設定(font-family、font-weight、font-style)
## **設計稿的文字設定**

> 字體大小與行高請觀看 Day11 每日任務
### **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.選擇字體後點選右上角的 Get font

3.可看到目前這個頁面,我們再點擊 Get embed code

>可選取多個字體,如上圖即是選擇三個字體。
4.可以看到左邊為我們選擇的字體,右邊則是我們要載入的程式碼

然後下方會**提供兩種方式載入(擇一使用)**

**使用 `<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,則貼到 CSS 區塊中 `Add External Stylesheets/Pens`(如下圖)
>貼上 url 內的網址即可

[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 / 答案 |
|:---:|:-------:|:--------------:|
| 01 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/rNENXPY)|
| 02 | han | [Codepen](https://codepen.io/iamHanCheng/pen/mdZdvYR) |
| 03 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/NWZPNVX) |
| 04 | yoishere | [Codepen](https://codepen.io/yoishere/pen/QWXwNoQ) |
| 05 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/LYKEZVp) |
| 06 | Mike | [Codepen](https://codepen.io/mike2049/pen/LYKEZGG?editors=1100) |
| 07 | Tony名彤 | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/KKjwMMG) |
| 08 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/XWLJKjv?editors=1100) |
| 09 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/xxobORG) |
| 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 11 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/bGPNeYj) |
|12|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/RwzNRZZ)|
| 13 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/RwzNRjZ) |
| 14 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/ZEdYOag) |
| 15 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/vYqEKWZ)|
| 16 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/ExBayQV?editors=1100)|
| 17 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/GRbgqjv) |
| 18 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/dyBPXaz) |
| 19 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/ExBayqN) |
| 20 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/WNqbGvq) |
| 21 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/MWMYjyK) |
| 22 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/NWZPRdQ) |
| 23 | Kim | [Codepen](https://codepen.io/kim0101__/pen/KKjwMyJ) |
| 24 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/oNrgzma) |
| 25 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/LYKERwX) |
| 26 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/WNqboYX) |
| 27 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/ExBaZLV)|
| 28 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/PorwWvd) |
| 29 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/LYKEWWe) |
| 30 | KUN. | [Codepen](https://codepen.io/barry91205/pen/rNEaygY) |
| 31 | kawa | [Codepen](https://codepen.io/z83xji6/pen/OJePmGm) |
| 32 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/oNrgwLx) |
| 33 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/zYVxzRx) |
| 34 | Emma | [Codepen](https://codepen.io/Emma0919/pen/eYwmRbm) |
| 35 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/OJePgEZ)|
| 36 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/bGPNRyO)|
| 37 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/rNEazJy?editors=1100)|
| 38 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/RwzNLWX) |
| 39 | 小咪 | [Codepen](https://codepen.io/iloveu3000x/pen/mdZyBRd) |
| 40 | Jim | [Codepen](https://codepen.io/JimChou/pen/xxobXgQ) |
| 41 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/XWLJePy?editors=1100) |
| 42 | MY | [Codepen](https://codepen.io/ahmomoz/pen/GRbgOMM) |
| 43 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/BagymbO?editors=1100) |
| 44 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/zYVxRVb?editors=1100) |
| 45 | hao jing | [Codepen](https://codepen.io/hjxu/pen/xxobWyO?editors=1100) |
| 46 | 喵喵 | [Codepen](https://codepen.io/snow1224/pen/VwJYddZ) |
| 47 | Matt BB | [Codepen](https://codepen.io/mm3248965/pen/oNrgMgX) |
| 48 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/NWZPLqJ) |
| 49 | macihuang | [Codepen](https://codepen.io/macy1215/pen/KKjwxvp) |
| 50 | chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/wvLBYWM) |
| 51 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/abgzRrx) |
| 52 | lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/wvLBQmj) |
| 53 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/ExBaOMP) |
| 54 | 嚼勁 | [Codepen](https://codepen.io/James520284/pen/KKjwbpO) |
| 55 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/OJePqGE)
| 56 | Darius_TszYing | [Codepen](https://codepen.io/bekgnohe-the-selector/pen/oNrgOEq)
| 57 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/abgzxqy)
| 58 |OSN|[Codepen](https://codepen.io/osncodepen/pen/eYwNOEV)|
| 59 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/RwzPNMY)|
| 60 | Enn |[Codepen](https://codepen.io/enntang/pen/PorqqMb)|
| 61 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/GRbJZOg) |
| 62 | 俊 | [Codepen](https://codepen.io/jun12079/pen/mdZJPjJ) |
| 63 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/YzoXWLN) |
| 64 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/abgOmKw) |
| 65 | neoyo | [Codepen](https://codepen.io/Neo-oo/pen/OJeVOQx?editors=1100) |
| 66 | emmayo | [Codepen](https://codepen.io/emmayo/pen/gONpXvR) |
| 67 | chris | [Codepen](https://codepen.io/chrischen666/pen/gONpEpM) |
| 68 | 1457 | [Codepen](https://codepen.io/1457dys/pen/abgOxQW) |
| 69 | Lobinda | [Codepen](https://codepen.io/Lobinda/pen/YzoXbBm) |
| 70 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/zYVGgjK?editors=1100)|
| 71 | xiang |[CodePen](https://codepen.io/XIANG-XIANG/pen/MWMawzO)|
| 72 | EdHuang |[CodePen](https://codepen.io/yide1986/pen/XWLmNqV)|
| 73 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/vYqNZmN) |
| 74 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/abgvqdy) |
| 75 | 白夜 | [Codepen](https://codepen.io/Wei903/pen/XWLmOvE) |
| 76 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/QWXyLKW) |
| 77 | xcx100 | [Codepen](https://codepen.io/c13026/pen/OJeMXmX) |
| 78 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/NWZxRKy) |
| 79 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/dyBGZRB) |
| 80 | smallr1229| [Codepen](https://codepen.io/Smallr/pen/xxoZJjM)
| 81 | n913239 | [Codepen](https://codepen.io/n913239/pen/KKjzwrJ) |
| 82 | wind | [Codepen](https://codepen.io/wind7y/pen/WNqwbmY) |
| 83 | LKP | [Codepen](https://codepen.io/qtghjujs-the-sasster/pen/xxoOVOV?editors=1100) |
| 84 | ho_yc | [Codepen](https://codepen.io/Ho_HYC/pen/poXbMep) |
| 85 | skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/qBzadej) |
| 86 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/QWXKjgb) |
| 87 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/xxoEOGd) |
| 88 | zen | [Codepen](https://codepen.io/zen742937/pen/QWXKBwR) |
| 89 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/BagQRBW) |
| 90 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/mdZOawZ)|
| 91 |iamcan | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/eYwBqdR)|
| 92 |Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/WNqpmGJ)|
| 93 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/RwzVaKz) |
| 94 | Toung | [Codepen](https://codepen.io/Toung/pen/bGPWveo) |
| 95 | Judy | [Codepen](https://codepen.io/yangchi/pen/MWMOjJB) |
| 96 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/PorOdEW) |
| 97 | tung | [Codepen](https://codepen.io/ru-ching/pen/zYVRLaN)|
| 98 | OZ | [Codepen](https://codepen.io/OZ_design/pen/yLdjrWg) |
| 99 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/PorgQxW) |
| 100 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/QWXRjLQ?editors=1100) |
<!--
| No | Discord | [Codepen]() |
-->