🏅 Day 13 - 文字設定（font-family、font-weight、font-style）

# 🏅 Day 13 - 文字設定（font-family、font-weight、font-style） ## **設計稿的文字設定** ![](https://imgur.com/ID4s5cM.png) > 字體大小與行高請觀看 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 ![](https://imgur.com/eUvFSXH.png) 3.可看到目前這個頁面，我們再點擊 Get embed code ![](https://imgur.com/K2Fug3Q.png) >可選取多個字體，如上圖即是選擇三個字體。 4.可以看到左邊為我們選擇的字體，右邊則是我們要載入的程式碼 ![](https://imgur.com/wmjAAan.png) 然後下方會**提供兩種方式載入（擇一使用）** ![](https://imgur.com/JnQxEtt.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">  </head> ``` 若是使用 CodePen，則貼到 HTML 區塊中 `Stuff for <head>`（如下圖） ![](https://i.imgur.com/LjAbEGN.png) **使用 `@import` 方式**：在 CSS 最上方加入 ```css= @import url('https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&display=swap'); ``` 若是使用 CodePen，則貼到 CSS 區塊中 `Add External Stylesheets/Pens`（如下圖） >貼上 url 內的網址即可 ![](https://imgur.com/56Jmvua.png) [CodePen 範例](https://codepen.io/jmimiding4104/pen/abQvKwB) ## 題目複製此 [CodePen](https://codepen.io/jmimiding4104/pen/mdQeKMK)，練習載入 Google Fonts **Castoro** 字型（需載入 Regular / 斜體樣式） ### 回報流程將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png)  ### 回報區 | # | 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) |