🏅 Day 9 - 文字設定（font-size、line-height）

# 🏅 Day 9 - 文字設定（font-family） ### **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/fhljksmg-the-styleful/pen/yyymQrY?editors=1100)，練習載入 Google Fonts **Noto Sans TC** 字型 ## 回報流程將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png)  ### 回報區 |#|Discord|CodePen / 答案| |:----:|:----:|:----:| | 1 | Jenna | [Codepen](https://codepen.io/abiscc14/pen/myJvOpr) | |2|Saika|[Codepen](https://codepen.io/saika4501/pen/jEPdVzz?editors=1100)| | 3 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/jEPdVJp?editors=1100)| | 4 | Esther |[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/RNPvKbV?editors=1100)| | 5 | Satar |[Codepen](https://codepen.io/SatarKuo/pen/qEdgRBb?editors=1100)| | 6 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/WbvPRxa) | | 7 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/pvJGRNB) | | 8 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/emNxgEm) | | 9 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/XJbOpYd?editors=1100) | | 10 | Hao |[Codepen](https://codepen.io/Howell/pen/VYLgPVy) | | 11 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/LEVqxjW)| | 12 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/PwqVbem?editors=1100)| | 13 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/emNxgwz) | | 14 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/ByNMpgb?editors=1100)| | 15 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/YPXBNoL?editors=1100)| | 16 | pastor |[Codepen](https://codepen.io/peter_hung/pen/OPVdpbe) | | 17 | 孟 |[Codepen](https://codepen.io/Mengru0503/pen/ByNMWma) | | 18 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/zxGeZPP) | | 19 | Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/myJvWzN) | | 20 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/vEObxbq) | | 21 | 冠翔 |[Codepen](https://codepen.io/hsrfcdrx-the-bold/pen/NPqopXG) | | 22 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/VYLgbVa) | | 23 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/GgJzEKv?editors=1100) | | 24 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/XJbOgKW?editors=1100) | | 25 | Yan* |[Codepen](https://codepen.io/Yan-L/pen/KwpJqgJ?editors=1100) | | 26 | suemma |[Codepen](https://codepen.io/suemma/pen/gbpqRNQ) | | 27 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=emNxENB) | | 28 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/XJbOerY) | | 29 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/dPoazar?editors=1100) | | 30 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/zxGedga) | | 31 | Sid |[Codepen](https://codepen.io/monkeybear721/pen/gbpqGQW?editors=1100) | | 32 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/ByNMwqd) | | 33 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/NPqowrL?editors=1100) |--> | 34 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/LEVqOLx?editors=1100) | | 35 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/vEObpxQ) | | 36 | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/jEPdYpM?editors=1100) | | 37 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/NPqoyMw) | | 38 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/bNdzLjo) | | 39 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/bNdzLza) | | 40 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/VYLgxbG?editors=1100) | | 41 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/xbGMzZm?editors=1100) | | 42 | Peggy |[Codepen](https://codepen.io/Peggy_C/pen/MYwLXeQ) | | 43 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/emNxKEL) | | 44 | LouisaFish |[Codepen](https://codepen.io/Louisa-Fish/pen/RNPvJWw?editors=1100) | | 45 | Mumu |[Codepen](https://codepen.io/ztz_mu/pen/QwbYBWB) | | 46 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/OPVdaer?editors=1100) | | 47 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/jEPdJqe) | | 48 | 立花 |[Codepen](https://codepen.io/kj25940858/pen/JodxzaE?editors=1100) | | 49 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/wBaNOYQ) | | 50 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/azOXxzW) | | 51 | Sylvie |[Codepen](https://codepen.io/shuping-xiao/pen/vEObwZE?editors=1100) | | 52 | 燕 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/WbvmbeB) | 53 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/RNPdNqO) | 54 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/myJoJKP) | | 55 | ahga |[Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/WbvmGNB) | | 56 | Gloria |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/PwqLmgp?editors=1100) |--> | 57 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/qEdvjXZ?editors=1100) |--> | 58 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/jEPJwJR?editors=1100) |--> | 59 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/PwqLKmV) | | 60 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/dPorQqN?editors=1100) | | 61 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/emNXxLK) | | 62 | Huang Eagle |[Codepen](https://codepen.io/YuCi/pen/EajMmdr) | | 63 | Scrooge |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/WbvWOKK?editors=1100) |--> | 64 | Space key |[Codepen](https://codepen.io/uuajlwse-the-selector/pen/vEOMZzx) | | 65 | Alyssa |[Codepen](https://codepen.io/AlyssaYen/pen/ZYGZJbE?editors=1100) | | 66 | TY |[Codepen](https://codepen.io/Ted-Y/pen/ZYGZJYz?editors=1100) | | 67 | NellyGuo |[Codepen](https://codepen.io/NNN-the-selector/pen/gbpyQmg?editors=1100) | | 68 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/XJbQLeG?editors=1100) | | 69 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/qEdGamq) | | 70 | Michelle |[Codepen](https://codepen.io/bastar_dize/pen/LEVqJym?editors=1100) | | 71 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/EajBvPq?editors=1100) | | 72 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/RNPzEMg) | | 73 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/ByNXoKy) | | 74 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/raVXLbZ?editors=1100) | | 75 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/yyNmgZv) | | 76 | B |[Codepen](https://codepen.io/Babel777/pen/PwPorjX) | | 77 | 雅潔 |[Codepen](https://codepen.io/MOMOYA/pen/myeJeNQ) | | 78 | Bee |[Codepen](https://codepen.io/Bee-Lu/pen/azvOGpV) | | 79 | World |[Codepen](https://codepen.io/HexschoolVuePujols/pen/ZYbGMzW) | | 80 | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/dPYoEKP) | | 81 | Lika |[Codepen](https://codepen.io/Fancy-the-lessful/pen/ByoNXyb) | | 82 | water | [Codepen](https://codepen.io/wateruby/pen/MYaaopx)| | 83 | 伊迪 | [Codepen](https://codepen.io/eku10rei/pen/GgppxdO)| | 84 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/JoYGWvr) | | 85 | Lucy |[Codepen](https://codepen.io/Lucytrycode/pen/PwPZdYR) | |86|小趴|[Codepen](https://codepen.io/papa2415/pen/YPyqVpJ)| | 87 | cindy |[Codepen](https://codepen.io/a50134/pen/bNVwKBO) | | 88 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/bNVwydx?editors=1100) | | 89 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/bNVBWyy) | | 90 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/zxvNVPZ)| | 91 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/RNWLRQG) | | 92 | Mini |[Codepen](https://codepen.io/miiinii32-Cheng/pen/myeXZEQ) | | 93 | 4ping | [Codepen](https://codepen.io/928Libra/pen/emprMGZ) | 94 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/VYvPNKN?editors=1100) | | 95 | PAgaNiNi |[Codepen](https://codepen.io/PA-OTTER/pen/XJmQQNz?editors=1100)| | 96 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ZYQzWWe?editors=1100)|