---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 13
## 文字設定（font-family、font-weight、font-style）
### **設計稿的文字設定**
> 字體大小與行高請觀看 [Day11 每日任務](https://hackmd.io/G6Leu6HhQAKjBJzPBoq-qg)
設計稿的 CSS 區塊中有一個 font 設定（如圖）
> `font: font-style, font-variant, font-weight, font-size/line-height, font-family;` 詳細可以觀看 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/font)
在撰寫程式碼時，不建議直接複製貼上，因為可能會造成整行錯誤而沒有吃到樣式
（像是上方圖片這個例子，實際沒有 medium 這個值，就會造成整行樣式失效）
### **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**
> 可以觀看「[CSS 字體設定全攻略](https://courses.hexschool.com/courses/20201122/lectures/41631867)」
>
以下簡單介紹：
通常撰寫字型的時候會在最後將通用字型（像是：sans-serif 無襯線字體）寫上，確保各個裝置都能正確瀏覽。
範例：
```css=
body{
font-family: Roboto, 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 載入**
選擇想要載入的字型，以 [Roboto](https://fonts.google.com/specimen/Roboto?query=Roboto) 為例。
進入 [Google Fonts](https://fonts.google.com/) 官網，搜尋 Roboto
<img width="300px" src="https://i.imgur.com/HA9cZ3A.png">
在 Styles 區塊選擇需要的文字粗細與斜體，點選下圖按鈕
可以看到右邊會出現已選擇的樣式
<img width="300px" src="https://i.imgur.com/nBPotdC.png">
然後下方會**提供兩種方式載入（擇一使用）**
<img width="300px" src="https://i.imgur.com/Y1NC1XE.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=Roboto:ital,wght@0,400;0,500;1,500&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=Roboto:ital,wght@0,400;0,500;1,500&display=swap');
```
[CodePen 範例](https://codepen.io/hexschool/pen/WNzNgoJ?editors=1100)
### 題目
複製此 [CodePen](https://codepen.io/hexschool/pen/BaraOPV?editors=1100)，練習載入 Google Fonts **Roboto Mono** 字型
（需載入 Regular / Thin / bold + 斜體 樣式）
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：https://codepen.io/hexschool/pen/oNqNPeL -->
回報區
---
| Discord | CodePen / 答案 |
|:-------------------:|:----------------------------------------------------------------------------:|
| 薏慈#3795 | [CodePen](https://codepen.io/its_wang/pen/wvmXawX) |
| Anna Liu#3794 | [CodePen](https://codepen.io/anna618/pen/MWVjLQv) |
| 小鐵#2814 | [CodePen](https://codepen.io/xiron/pen/wvmzXga) |
| 𝓛𝓊𝒸𝓎#8635 | [CodePen](https://codepen.io/lucygirl/pen/XWEXXPP) |
| SASIMI#5099 | [CodePen](https://codepen.io/sashimi1327/pen/xxWEGzm) |
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/KKogyae) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/RwMGjKG?editors=1100) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/MWVjOJP) |
| Amberhh#2465 | [CodePen](https://codepen.io/Amberhh/pen/dympZvY?editors=1100) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/NWYRwgy) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/jOzMaGp) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/RwMGjjK) |
| Karol-Kuo#5287 | [CodePen](https://codepen.io/ting-yu-kuo/pen/KKogyoG) |
| 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/abYmVaz) |
| pidder#7315 | [CodePen](https://codepen.io/pidderliao/pen/MWVjOpz) |
| WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/NWYRwEB?editors=1100) |
| Zera#6060 | [CodePen](https://codepen.io/zera-tseng/pen/GRxjOwM) |
| Arista#5802 | [CodePen](https://codepen.io/arista-hsieh/pen/QWmKawY) |
| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/abYmVMv?editors=1100) |
| Daisy_Li#4231 | [CodePen](https://codepen.io/lidairong-gmail-com/pen/wvmzPmy) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/NWYRXPE?editors=1100) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/YzaGYyr) |
| CloThEs#7837 | [CodePen](https://codepen.io/bogwdnxx-the-sans/pen/OJvROeZ) |
| peter.chen# | [CodePen](https://codepen.io/JIAN-RONG/pen/zYWKpGr?editors=1100) |
| PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/GRxjyjd?editors=1100) |
| Benson#6763 | [CodePen](https://codepen.io/kumashow/pen/WNzGdxm) |
| Leo Song #8278 | [Codepen](https://codepen.io/sunnylaba/pen/MWVjrJY?editors=1100) |
| 洋蔥#5295 | [Codepen](https://codepen.io/HSUNA/pen/oNqzopb?editors=1100) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/xxWEpLq) |
| hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/OJvRzPE?editors=1100) |
| 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/QWmKaVW?editors=1100) |
| Sin#0040 | [CodePen](https://codepen.io/sophmfyt-the-sasster/pen/vYRXpaa?editors=1100) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/XWEjVZN) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/eYMdyjd?editors=1100) |
| leeli#6243 | [CodePen](https://codepen.io/leelilee/pen/zYWKpgd?editors=1100) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/RwMGQbv?editors=1100) |
| LHchien33#6232 | [CodePen](https://codepen.io/lin_chien/pen/yLKavOg?editors=1100) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/vYRXdPE?editors=1100) |
| 群嘉#3943 | [CodePend](https://codepen.io/efzdamnp-the-lessful/pen/VwXKXZw?editors=1100) |
| JarDar #6980 | [codepen](https://codepen.io/jardarpen/pen/eYMdVoK) |
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/oNqzqXv?editors=1100) |
| 鴨鴨#9822 | [CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/WNzGzQX) |
| Joyce#3790 | [CodePen](https://codepen.io/joycehuang/pen/rNdMdOQ?editors=1100) |
| 阿蘇#8531 | [CodePen](https://codepen.io/susu8327/pen/dympmzG) |
| skypassion5000#4151 | [CodePen](https://codepen.io/skypassion5000/pen/yLKaKzR?editors=1100) |
| Winnie Wu#5468 | [CodePen](https://codepen.io/Pooh-Wu/pen/rNdMdQX?editors=1100) |
| 威0#6919 | [CodePen](https://codepen.io/n0918679182/pen/LYdRdoR) |
| Henry#7386 | [CodePen](https://codepen.io/h1nr9/pen/wvmzjGY) |
| jin.huang#4666 | [CodePen](https://codepen.io/HJ7878/pen/KKogRyP?editors=1100) |
| suihsilan#9485 | [CodePen](https://codepen.io/suihsilan/pen/eYMdrRJ?editors=1100) |
| QOO#8446 | [CodePen](https://codepen.io/QOOQOOQ/pen/dympemd?editors=1100) |
| YI#0863 | [CodePen](https://codepen.io/YI0305/pen/PoRGezB?editors=1100) |
| ssozr#4680 | [codepen](https://codepen.io/ssozr/pen/WNzGJzV) |
| 鉦勝 #8333 | [codepen](https://codepen.io/atckmax823/pen/oNqzdry?editors=1100) |
| 小樽 #3151 | [codepen](https://codepen.io/tzuen-liou/pen/YzaGvqd) |
| yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/mdxrLxG) |
| 我是泇吟 #5189 | [codepen](https://codepen.io/kljuqbxs/pen/GRxjGLo) |
| 雷雷#7844 | [codepen](https://codepen.io/lei-yi-jie/pen/JjLRBWP) |
| Melon#0380 | [codepen](https://codepen.io/BalaFang/pen/rNdMrwR) |
| Jamie Wu#9345 | [CodePen](https://codepen.io/Wu220103/pen/WNzGgNY) |
| Fanglin#4054 | [Codepen](https://codepen.io/flynn841028/pen/eYMdLMZ) |
| IreneY#0086 |[Codepen](https://codepen.io/HalfPlannedJourney/pen/PoRGyzM)|
|Van.cs|[Codepen](https://codepen.io/fbacojji-the-selector/pen/bGvwmqV?editors=1100)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/ZExpqOK)|
| Yunei#6323 |[Codepen](https://codepen.io/Yunei/pen/poLExqW)|
| Halla #0431 |[Codepen](https://codepen.io/wawykddh-the-typescripter/pen/BarLGmw)|
| Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/xxWEQew) |
| Manson許 #2295 | [Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/gOewZPe?editors=1100) |
| Sentiments#4883 | [codepen](https://codepen.io/Sentiments/pen/NWYRegJ?editors=1100)|
| Yuna Huang #2692 | [codepen](https://codepen.io/Yuna1002/pen/zYWKeKP)|
| 小白#2406 | [codepen](https://codepen.io/gracewhite/pen/bGvwzap)|
|鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/qBoavmW?editors=1100)|
| 楓之聲#6945 | [codepen](https://codepen.io/sshane258/pen/ZExpZJG) |
|YU #0618|[codepen](https://codepen.io/yoken_/pen/OJvRYVe) |
| Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/RwMowQo)|
| JingXuanLin#3371| [CodpPen](https://codepen.io/YouShuang/pen/vYRyEEZ)|
| mickey#8745| [CodpPen](https://codepen.io/weizhetseng/pen/VwXmYJd?editors=1100)|
| Fang #4680 | [CodpPen](https://codepen.io/std95174/pen/YzapXpd?editors=1100)|
| 狸貓#5863 | [CodpPen](https://codepen.io/tanuki320/pen/LYdbVQX?editors=1100)|
| Scottie#5850 | [CodpPen](https://codepen.io/wow767t/pen/GRxNJzg?editors=1100)|
|阿翰 #1984 |[CodePen](https://codepen.io/JohnHan05/pen/rNdWxve)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/KKoNMwy)|
|ajhappy#6488|[Codepen](https://codepen.io/ajhappy5438/pen/rNdWLrb)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/PoRbbxq?editors=1100)|
|Susie(軒)#6181|[Codepen](https://codepen.io/Codeleaf/pen/yLKVgJK)|
|Kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/vYRyxZW?editors=1100)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/ExENWzm)|
| Yuan962#5897| [Codepen](https://codepen.io/Jasmine-Liao/pen/QWmGvMN)|
| Hsiu#8767| [Codepen](https://codepen.io/amy-hsiu/pen/ZExBeVQ)|
|阿基基 #2557|[Codepen](https://codepen.io/JIJI_GNI/pen/QWmGgWg)|
|Clara Cai#7097|[CodePen](https://codepen.io/Clara-Snowy/pen/mdxOxaR)|
|christina#6185|[Codepen](https://codepen.io/chrisc0210/pen/ExENLEy)|
|YaWen#2752|[Codepen](https://codepen.io/yuwendy/pen/KKoNeKp)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/jOzVKYr)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/abYBrKY)|
|Carrie#2750|[Codepen](https://codepen.io/carrie-wang/pen/ZExLGre)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/ExEZNvv)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/eYMgpgr)
| GARBO#6659 | [CodePen](https://codepen.io/garbo8130/pen/VwXPzJr?editors=1100)|
| sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/WNzRXRp)
| 瑞瑞#4605|[Codepen](https://codepen.io/tsai-li-ting/pen/OJvWzxQ?editors=1100)
| Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/MWVJVrV)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/qBoRQpv?editors=1100)|
|bakiii |[codepen](https://codepen.io/aki168/pen/mdxRgJO)|
|RayChen#6088 |[codepen](https://codepen.io/raychen1996/pen/JjLWPJy)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/MWVpWXV?editors=1100)|
|Pony0303#6778|[Codepen](https://codepen.io/Pony0303/pen/NWYpvmO?editors=1100)|
|紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/NWYpZwN?editors=1100)|
|jeter#8014|[Codepen](https://codepen.io/gi-tai-she/pen/yLKMdzb?editors=1100)|
|EmilyLin#0526|[Codepen](https://codepen.io/c199615/pen/LYdyEVK?editors=1100)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/YzaVvmL?editors=1100)|
|艾草#4830|[Codepen](https://codepen.io/jmkhsutp/pen/BarZpaM?editors=0100)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/XWEgwmQ)|
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/poLwXjz)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/MWVvEJP)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/eYMEGqY)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/poLWooY)|
|ROKA#4051|[CodePen](https://codepen.io/chengchiaoyi/pen/qBoVEdP)|
|鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/JjLrvvB)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/mdxpdbr)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/vYRpYZg)|
|rueee#7997|[CodePen](https://codepen.io/Jull-C/pen/dymJMbg)|
|Jumpye#8601|[CodePen](https://codepen.io/Jumpye/pen/abYqXJV?editors=1100)|
|CJ07#0176|[CodePen](https://codepen.io/cjtseng07/pen/rNddqyW)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/MWVXeyJ?editors=1100)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/ExEddPO)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/YzaRVaX)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/OJvqaJP)
Sign in with Wallet
Connect another wallet