--- tags: 30 天軟體工程師體驗營｜2025 --- # 🏅 切版任務 Day5 - Google Fonts 線上外部字型載入 > 建議觀看的影音章節： > - CSS - VS Code 網頁編輯器、HTML 基礎教學 > - CSS - CSS常用語法 > - CSS - 使用 CSS 變更 HTML 標籤特性 ### **font-family** > 以下簡單介紹： 通常撰寫字型的時候會在最後將通用字型（像是：sans-serif 無襯線字體）寫上，確保各個裝置都能正確瀏覽。 範例： ```css= body{ font-family: Castoro, 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 載入** 選擇想要載入的字型，以 [Castoro](https://fonts.google.com/specimen/Castoro) 為例。 1.進入 [Google Fonts](https://fonts.google.com/) 官網，搜尋 Castoro 2.點擊右上角的「Get font」 3.會跳轉到這個畫面，接著點擊「Get embed code」 ![](https://imgur.com/OnsYucx.png) 然後下方會**提供兩種方式載入（擇一使用）** <img width="300px" src="https://imgur.com/eISXdhs.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"> <!-- 自定義的 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 範例](https://codepen.io/jmimiding4104/pen/vYMvRxq) ## 題目 練習載入作業需使用的 Google Fonts **Noto Sans** 與 **Tourney** 字型 ### 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： https://codepen.io/jmimiding4104/pen/wvZRmeG --> ### 回報區 --- | 報數 | Discord 名字 | CodePen／其他回饋 | |:----:|:------------:| --------------------------------------------------------------------------- | | 1 | Stan | [[CodePen]](https://codepen.io/Stan-Huang/pen/RNNQMOG) | |2|蛋殼|[Codepen](https://codepen.io/weybrian/pen/qEExoGB) | 3 | 力文 | [[CodePen]](https://codepen.io/liwenchiou/pen/oggEqrj?editors=1100) | | 4 | dean | [Codepen](https://codepen.io/ch933114/pen/vEEdRqX) | 5 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/xbKpGrN) | | 6 | Melanie | [[CodePen]](https://codepen.io/pnrcspte-the-animator/pen/YPPeLXG) | | 7 | 7Lun | [Day5-CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/KwwQRWb) | | 8 | tina01170 | [CodePen](https://codepen.io/tina-huang-the-bashful/pen/QwwQrpZ) | | 9 | 冠翔 | [CodePen](https://codepen.io/hsrfcdrx-the-bold/pen/vEEdjRe) | | 10 | 林明德 | [CodePen](https://codepen.io/lwescocn-the-vuer/pen/ByyYxPO) | | 11 | akkk | [CodePen](https://https://codepen.io/ak-wu-the-decoder/pen/bNNLMQO) | 12 | Toung |[CodePen](https://codepen.io/Toung/pen/GggQdxQ) | 13 | Cami | [CodePen](https://codepen.io/irisLife/pen/azzqGPm) | 14 | WAWATA | [CodePen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/qEExYwm) | 15 | Duck | [CodePen](https://codepen.io/Duck2025/pen/raaJvrV) | 16 | nora_zizi | [CodePen](https://codepen.io/Nora-Ch/pen/oggEdaW) | 17 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/yyyvELy) | 18 | Ataya | [CodePen](https://codepen.io/zin-seven/pen/jEEZKEN) | 19 | 謝天 | [CodePen](https://codepen.io/crisxie/pen/YPPeLdE) | 20 | Min | [CodePen](https://codepen.io/cvqevoxk-the-decoder/pen/YPPeLMY) | 21 | mambo | [CodePen](https://codepen.io/chiang_mb/pen/RNNQyOM) | 22 | Joseph_Kyuu | [CodePen](https://codepen.io/zrzfastd-the-reactor/pen/YPPevKe) | 23 | Zing | [CodePen](https://codepen.io/TZU-YIN-WANG/pen/vEEdrGr)| |24|小趴|[Codepen](https://codepen.io/papa2415/pen/bGJyJLV)| | 25 | pastor | [Codepen](https://codepen.io/peter_hung/pen/NPPyzox) | | 26 | yuna | [Codepen](https://codepen.io/Yuna1002/pen/yyyvEmX) | | 27 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/MYYQqyL) | | 28 | 叮咚 | [Codepen](https://codepen.io/pen/) | | 29 | 随縁 | [Codepen](https://codepen.io/zuien/pen/JoopBNx?editors=1100) | | 30 | 柔術小子 | [Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/RNNQYQL) | | 31 | hank_08123 | [Codepen](https://codepen.io/hankyang1213/pen/WbbMgKL) | | 32 | hoahaoliao | [Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/OPPQBxY?editors=1100) | | 33 | jane.yg | [Codepen](https://codepen.io/Jane-Yang-the-reactor/pen/KwwQGvd) | |34|Saika|[Codepen](https://codepen.io/saika4501/pen/JoopmBL)| |35|Jane|[Codepen](https://codepen.io/jkmx/pen/XJJZxqa)| |36| 馬德 |[Codepen](https://codepen.io/maywang/pen/gbbvzQK?editors=1100)| |37| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/RNNQeJv)| |38| 消波塊 |[[CodePen]](https://codepen.io/PaulHsiao/pen/VYYQEOg)| | 39 | Archang | [Codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/bNNLmQd) | |40| BaLaLaYOU |[CodePen](https://codepen.io/bashawxd-the-bashful/pen/bNNLQjR)| |41| Kath |[CodePen](https://codepen.io/JLin-the-lessful/pen/gbbvqdJ)| |42| 蛋白 |[蛋白的CodePen Day5](https://codepen.io/sjlu-0/pen/vEEdbbP)| |43| ying |[CodePen](https://codepen.io/Lara-Lin/pen/dPPdrGr)| |44| Jinie |[CodePen](https://codepen.io/jiniecheung/pen/dPPdreb)| |45| wei_0982 |[CodePen](https://codepen.io/nico-lai/pen/vEEdPMG)| |46| fishcold9714 |[CodePen](https://codepen.io/yu-han-feng/pen/RNNQOej)| |47| aka |[CodePen](https://codepen.io/gfbmnvas-the-animator/pen/oggERXG)| |48| Ali |[CodePen](https://codepen.io/Alicia1117/pen/LEEQKYX)| |49| EdenWu |[CodePen](https://codepen.io/eden-wu/pen/MYYQMBX)| |50| Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/bNNLXVa)| |51| ann#6212 |[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/jEEZgQJ)| |52| 野鴿 |[Codepen](https://codepen.io/HoshinoSyouta/pen/ZYYrgVE)| |53| Michelle|[Codepen](https://codepen.io/bastar_dize/pen/vEEdzZm?editors=1100)| |54| Holly|[Codepen](https://codepen.io/LEE-HOLLY/pen/myyXNOm)| |55| Aoi|[Codepen](https://codepen.io/zching07/pen/YPPazXM) |56| 00LIN|[Codepen](https://codepen.io/Jean-Chen-the-solid/pen/myyxbag) |57| 登登登|[Codepen](https://codepen.io/Duncanin/pen/XJJErQz?editors=1100) |58| Yan|[Codepen](https://codepen.io/Yan-L/pen/Kwwowgx) |59| 蛋黃|[Codepen](https://codepen.io/yiyun12o9/pen/wBBmBNY) |60| Klaus-Chen|[Codepen](https://codepen.io/Klaus-Chen/pen/LEEdVdd?editors=1100) | 61 |gracechiang225 | [CodePen](https://codepen.io/gracechiang225/pen/LEEdpVX) | | 61 |Daniel Huang | [CodePen](https://codepen.io/Hou-Chieh-HUANG/pen/ByyrjXq) | | 63 | B | [CodePen](https://codepen.io/Babel777/pen/EaaENXW) | | 64 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/wBBmJJp) | | 65 | ArvinSu | [CodePen](https://codepen.io/Arvin-Su/pen/raadzWb) | | 66 | 牛奶 | [CodePen](https://codepen.io/0omilko0/pen/VYYXzzK) | | 67 | allen3290 | [CodePen](https://codepen.io/udadkudw-the-looper/pen/jEEzLRJ) | | 68 | Owen He | [CodePen](https://codepen.io/owen1120/pen/KwwoXvw) | | 69 | An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/vEERpxy) | | 70 | Nora | [CodePen](https://codepen.io/Yun-Jhen-Dai/pen/GggxQKx) | | 71 | leo_tzou | [CodePen](https://codepen.io/JH_Portfolio/pen/YPPaMep) | | 72 | CBK | [CodePen](https://codepen.io/BK-C-the-styleful/pen/dPPmxwO) | | 73 | Sylvia1121 | [CodePen](https://codepen.io/Sylvia93458/pen/PwweoWY) | | 74 | Clare | [CodePen](https://codepen.io/cwwc57/pen/emmrYgG) | |75|yang|[codepen](https://codepen.io/Yang-J/pen/MYYGWBO?editors=1100)| | 76 |YuTing|[codePen](https://codepen.io/venus50533/pen/JoovoYQ)| | 77 |周周|[codePen](https://codepen.io/jhoujhou-the-decoder/pen/GggdpyK?editors=1100)| | 78 |William Hsieh|[codePen](https://codepen.io/lsaimqxa-the-vuer/pen/JoovGwY?editors=1100)| | 79 |Leonard|[codePen](https://codepen.io/hyyfjqra-the-sans/pen/ByyxKwv)| | 80 |Jingle0900|[codePen](https://codepen.io/EvaLi0472/pen/oggdemL?editors=1100)| | 81 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/VYYxXpV) | 82 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/wBBjjGJ?editors=1111) | 83 |tiffany871205|[Codepen](https://codepen.io/Tiffany-Tai/pen/azzGKPW) | 84 | stone |[Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/PwwearV)| | 85 | holysi |[Codepen](https://codepen.io/holysi/pen/zxxjmGx)| | 86 | anson.www |[Codepen](https://codepen.io/zzkvrkzi-the-sans/pen/bNNMQME)| |87| Peggy |[CodePen](https://codepen.io/cpt23462599/pen/ZYYRzzZ)| |88| mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/XJJYrRb) | |89| HLC | [CodePen](https://codepen.io/pppbbb262626/pen/jEEKOMb) | |90| cheryl | [CodePen](https://codepen.io/katrina-the-decoder/pen/emmKgay) | |91| 艾琳 | [CodePen](https://codepen.io/Irene-Chuang/pen/ByyVdrW?editors=1100) | |92| Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/bNNKjLG) |93| JHT |[Codepen](https://codepen.io/juanht/pen/EaaRoYR) |94| Rogan |[Codepen](https://codepen.io/RoganHsu/pen/pvvZXXb) |95|Astrid|[2025/05/08 DAY4](https://codepen.io/astrid321654/pen/bNNxNBV) |96|tung|[Codepen](https://codepen.io/oltsegon-the-looper/pen/yyyxNrr) |97|yue|[Codepen](https://codepen.io/Ling-the-scripter/pen/oggMMmy) |98|Aidd.|[Codepen](https://codepen.io/aiddchen/pen/WbbgxrL) |99|oyll|[Codepen](https://codepen.io/dizzydog-rgb/pen/WbbgGxr) |100|姜承|[Codepen](https://codepen.io/Troy0718/pen/PoyOzLQ?editors=1100) |101|Tou|[Codepen](https://codepen.io/Datou-Huang/pen/jEEvRPP) |102|Sonia|[Codepen](https://codepen.io/YUJOU/pen/MYYPwwr) |103|Acadia|[Codepen](https://codepen.io/Acadia/pen/ZYYqbmb?editors=1100) |104|kelsonhouse|[Codepn](https://codepen.io/Kelson-House/pen/OPPBMpe) |105|Apple Pie|[Codepn](https://codepen.io/ymevqzjf-the-builder/pen/WbbawEZ) |106|vima|[Codepn](https://codepen.io/chin7004/pen/VYYVgKg) |107|糰子|[每日任務D5](https://codepen.io/hiyuki-dango/pen/dPPwvWz) |108|DD|[Codepn](https://codepen.io/dorihung/pen/GggPxmj) |109|小豬佩奇|[Codepn](https://codepen.io/HoPeiZhen/pen/zxxyXgZ) |110|孟|[Codepn](https://codepen.io/Mengru0503/pen/ZYYwWMJ?editors=1100) |111|duchi|[Codepn](https://codepen.io/sqaz0502/pen/LEEqbvM) |112|ja4071|[Codepen](https://codepen.io/SHAO-L/pen/WbbPVxy) |113|Mic|[Codepen](https://codepen.io/Mic-Pan/pen/qEEvpLa) |114|joker|[Codepen](https://codepen.io/jokersosmart/pen/NPPJYdr) |115|Debby Yang|[Codepen](https://codepen.io/Debby-Yang/pen/OPPqoMm) |116|emma8470|[20250517](https://codepen.io/emachen/pen/bNNJwqo) |117|YUN|[Codepen](https://codepen.io/sant220210/pen/oggOzxN) |118|木乃伊 Kimi|[Codepen](https://codepen.io/veqjtzdb-the-lessful/pen/MYYRJJm) |119|Lynn|[Codepen](https://codepen.io/Yen-Ling-Peng/pen/yyyrPNa?editors=1100) |120|禹成林|[Codepen](https://codepen.io/useirin/pen/VYYNrEO) |121|Kinkin|[Codepen](https://codepen.io/Kinkin-Yo/pen/YPPbwZP) |122|taishan_90178|[Codepen](https://codepen.io/candy99/pen/JoogooL) |123| jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/EaaBpbW) |124|Nea| [CodePen](https://codepen.io/neacode/pen/MYwgWRa) |125|富| [CodePen](https://codepen.io/spring40747/pen/xbGKoog) |126|HedyCheb| [CodePen](https://codepen.io/hedychen/pen/GgJKVJX?editors=1100) |127|Katie| [CodePen](https://codepen.io/Katiekatiehsu/pen/raVVrzZ) |128|kent| [CodePen](https://codepen.io/kentlee406/pen/GgJoKLe) |129|610| [CodePen](https://codepen.io/YI-LING-LIU/pen/ZYGQQvw) |130|waynetrece| [CodePen](https://codepen.io/waynetrece/pen/LEVWowv) | 131 | Yanchen16 |[CodePen](https://codepen.io/keyrtlij-the-reactor/pen/YPXYRpr) |132| World |[CodePen](https://codepen.io/HexschoolVuePujols/pen/raVKqXJ) |133| Chuang |[CodePen](https://codepen.io/uidoytjq-the-solid/pen/YPXdyoR?editors=1100) |133| ryckie |[CodePen](https://codepen.io/14172/pen/KwdMQbM?editors=1100)