---
# System prepended metadata

title: "\U0001F3C5 Day 13"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 13

## 文字設定（font-family、font-weight、font-style）

### **設計稿的文字設定**
![](https://i.imgur.com/StmQp84.png)
> 字體大小與行高請觀看 [Day11 每日任務](https://hackmd.io/G6Leu6HhQAKjBJzPBoq-qg)

設計稿的 CSS 區塊中有一個 font 設定（如圖）

![](https://i.imgur.com/t0ODgA1.png)
> `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 區塊選擇需要的文字粗細與斜體，點選下圖按鈕
![](https://i.imgur.com/vijJTiz.png)

可以看到右邊會出現已選擇的樣式

<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>`（如下圖）

![](https://i.imgur.com/LjAbEGN.png)

**使用 `@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://i.imgur.com/vftL5i0.png)

<!-- 解答：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)