--- tags: 軟體工程師體驗營 - 2024 --- # 🏅 切版任務 Day6 - Google Fonts 線上外部字型載入 ### **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 | 白白 | [Codepen](https://codepen.io/YuBai/pen/vYMwPdd) | | 2 | Meng | [Codepen](https://codepen.io/menglin1203/pen/vYMwPQj) | | 3 | Mike00712 | [Codepen](https://codepen.io/buliyuil-the-animator/pen/QWPRoJe) | | 4 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/OJGYqrr) | | 5 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/jORoJjE) | | 6 | LGJason | [Codepen](https://codepen.io/j811108/pen/VwNOROx) | | 7 | Langyc | [Codepen](https://codepen.io/Hsiflow-Lang/pen/dyLErrd) | | 8 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/LYvovYQ) | | 9 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/XWQwQJM) | | 10 | Chen | [Codepen](https://codepen.io/yingchangchen/pen/RwOmONe) | | 11 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/bGJyJpb) | | 12 | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/yLrWreJ?editors=1100) | | 13 | Larry | [Codepen](https://codepen.io/larrylinr5/pen/ExJzJWb?editors=1100) | | 14 | Yuwen | [Codepen](https://codepen.io/Yuwen-the-reactor/pen/NWmVJXo) | | 15 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/bGJyJLV) | | 16 | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/PogvgQY) | | 17 | 詹姆士 | [Codepen](https://codepen.io/z111048/pen/xxeNeRY) | | 18 | Eden | [Codepen](https://codepen.io/iseden/pen/oNOROMJ) | | 19 | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/GRLaLPR) | | 20 | jerry | [Codepen](https://codepen.io/sony791210/pen/XWQwQwY) | | 21 | lynn_1002 | [Codepen](https://codepen.io/LyNnYWu/pen/vYMwMzw) | | 22 | Elva Su | [Codepen](https://codepen.io/evensu_/pen/wvZbZEM?editors=1100) | | 23 | Emma | [Codepen](https://codepen.io/huang_L/pen/wvZbbBo) | | 24 | Mico | [Codepen](https://codepen.io/Mico-the-bold/pen/NWmVmZd) | | 25 | Lauren | [Codepen](https://codepen.io/Lauren8/pen/PogvvoN) | | 26 | james867. | [Codepen]( https://codepen.io/JCT34/pen/ZEZNNzx) | | 27 | CrystalLala | [Codepen](https://codepen.io/crystallala/pen/zYXQQrm) | | 28 | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/LYvooGo) | | 29 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/yLrWWMj) | | 30 | LYC | [Codepen](https://codepen.io/LY-C/pen/PogvvLJ) | | 31 | boin | [Codepen](https://codepen.io/boinji/pen/BaEeeeJ) | | 32 | Aust1n | [Codepen](https://codepen.io/AustinYEH/pen/VwNOONK?editors=1100) | | 33 | Chingya | [Codepen](https://codepen.io/chingya1214/pen/NWmVVyw) | | 34 | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/wvZbbOy) | | 35 | 阿若 | [Codepen](https://codepen.io/skar5268/pen/BaEegar) | | 36 | JESS | [Codepen](https://codepen.io/-8412/pen/JjVqQjG) | | 37 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/XWQwLKJ) | | 38 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/XWQwwLv?editors=1100) | | 39 | liugod3824🔥 | [Codepen](https://codepen.io/kjssvtkr-the-animator/pen/OJGYeXZ)✔ | | 40 | 阿宸 | [Codepen](https://codepen.io/xnocndjt-the-sans/pen/YzMboKN?editors=1100) | | 41 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/dyLEBWW) | | 42 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/ExJzBoy) | | 43 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/dyLEBeV) | | 44 | emmayo | [Codepen](https://codepen.io/emmayo/pen/XWQwLEd) | | 45 | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/mdgYYby?editors=1100) | | 46 | CCY | [Codepen](https://codepen.io/cyizumi/pen/vYMwqPr) | | 47 | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/VwNOJYP) | | 48 | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/oNORrOp?editors=1000) | | 49 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/poBmXmJ) | | 50 | 宇 | [Codepen](https://codepen.io/jian-yu-chen/pen/vYMwwMg) | | 51 | 小米 | [Codepen](https://codepen.io/hlgudwue-the-typescripter/pen/dyLExRg) | | 52 | Zora | [Codepen](https://codepen.io/edfvdfjh/pen/KKYLObm) | | 53 | Toung | [Codepen](https://codepen.io/Toung/pen/XWQwLPK) | | 54 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/oNOrvgR?editors=1100) | | 55 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/OJGYKvJ) | | 56 | spadegun | [Codepen](https://codepen.io/spadegun/pen/NWmZKYw) | | 57 | MDFK | [Codepen](https://codepen.io/aqcrrhwb/pen/ExJzMMW?editors=1100) | | 58 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/BaEgaaY) | | 59 | yuling | [Codepen](https://codepen.io/igzdflpu/pen/YzMozPZ) | | 60 | arvin | [Codepen](https://codepen.io/arvinyang1925/pen/jORjOPQ) | | 61 | MY | [Codepen](https://codepen.io/ahmomoz/pen/VwNJwJX) | | 62 | sweewei | [Codepen](https://codepen.io/sweewei-Law/pen/VwNJYmG) | | 63 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/yLrWjYa) | | 64 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/PogrwKM) | | 65 | 快樂小豬 | [Codepen](https://codepen.io/rtjowfyf-the-lessful/pen/RwOzwOB?editors=1111) | | 66 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/PogvvxK?editors=1100) | | 67 | Ellie | [Codepen](https://codepen.io/Ellie-Chiang/pen/OJGePKM) | | 68 | KUN. | [Codepen](https://codepen.io/barry91205/pen/WNWqvNp) | | 69 | suandme | [Codepen](https://codepen.io/su-su-the-sans/pen/MWRMwKQ) | | 70 | Jenny_7314 | [Codepen](https://codepen.io/Jenny_000/pen/gOyNpPP?editors=1100) | | 71 | Melissa | [Codepen](https://codepen.io/melissa-chou/pen/JjVQdMg) | | 72 | 秀 | [Codepen](https://codepen.io/Alyssa-CHEN-the-bashful/pen/oNOrXqg) | | 73 | 黑嚕嚕 | [Codepen](https://codepen.io/wzokvjha-the-vuer/pen/GRLbJXr) | | 74 | Kasie | [Codepen](https://codepen.io/KasieL/pen/qBwzdqG?editors=1100) | | 75 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/JjVQYJR) | | 76 | leo.chang | [Codepen](https://codepen.io/s16777216/pen/JjVQYpE) | | 77 | Maxine | [Codepen](https://codepen.io/Maxine0713/pen/bGJPVMO) | | 78 | macihuang | [Codepen](https://codepen.io/macy1215/pen/gOyNaGz) | | 79 | Mars | [Codepen](https://codepen.io/Mars-the-flexboxer/pen/XWQLmyK) | | 80 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/GRLbpPB) | | 81 | FURUTO | [Codepen](https://codepen.io/oditudnw-the-flexboxer/pen/ExJBPYm) | | 82 | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/JjVQGor) | 83 | hsiehmo16 | [Codepen](https://codepen.io/mohsieh/pen/zYXVvJB) | | 84 | mionne | [Codepen](https://codepen.io/neohyntw/pen/YzMowZJ) | | 85 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/PogrZOM) | | 86 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/vYMqLxQ) | | 87 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/XWQLXWp) | | 88 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/jORjWKM) | | 89 | 樂樂 | [Codepen](https://codepen.io/Wpypy/pen/QWPXNyg) | | 90 | yicheng | [Codepen](https://codepen.io/YiChengCHANG/pen/XWQLdpx) | | 91 | 真真瑋瑋 | [Codepen](https://codepen.io/Yujhen-Li/pen/QWPXNgO) | | 92 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/bGJPpQa) | | 93 | Camila | [Codepen](https://codepen.io/camilalo/pen/OJGeRMG) | | 93 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/rNbEwxX) | | 94 | JY | [Codepen](https://codepen.io/jylee0805/pen/xxeNvEp) | | 95 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/JjVQyNp) | | 96 | sylviabuy | [Codepen](https://codepen.io/sylviabela/pen/VwNJMZO) | | 97 | 婉玲Dacy | [Codepen](https://codepen.io/xxaynqoq-the-animator/pen/xxeoXxy) | | 98 | 邵 | [Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/vYMqWpe) | | 99 | Six | [Codepen](https://codepen.io/Max-kuo/pen/OJGeOQE?editors=1100) | | 100 | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/zYXVpow) | | 101 | JIAWUN |[Codepen](https://codepen.io/wkasixgv-the-sasster/pen/BaEgJLe)| | 102 | damon0323 |[Codepen](https://codepen.io/swk9eny2/pen/zYXVRWe)| | 103 | kawa | [Codepen](https://codepen.io/z83xji6/pen/BaEgYGZ) | | 104 | emmazhang. | [Codepen](https://codepen.io/zhangemma/pen/wvZLyPJ) | | 105 | aoya9155 | [Codepen](https://codepen.io/aoya2139/pen/VwNJdWZ) | | 106 | Andy_12 | [Codepen](https://codepen.io/lifann/pen/NWmZBPY) | | 107 | oldan | [Codepen](https://codepen.io/Enix-Chien-/pen/BaEgMrp) | | 108 | Maca | [CodePen](https://codepen.io/uimaca/pen/MWRMxaZ) | |109|Ran|[Codepen](https://codepen.io/Ran-Ran-the-typescripter/pen/mdgZoYL)| |110|Linfe|[Codepen](https://codepen.io/Linfe/pen/GRLbZNo)| |111|ss585801|[Codepen](https://codepen.io/ss585801/pen/wvZVwPg)| |112|jerry_66983| [Codepen](https://codepen.io/Barry-C/pen/zYXVQKL) | | 113| qet1717 | [Codepen](https://codepen.io/yizukwgs-the-flexboxer/pen/LYvwPjv) | | 114| peggy | [Codepen](https://codepen.io/peggy0419/pen/GRLVqQO) | |115| Frank Chiang | [Codepen](https://codepen.io/frankchiang/pen/WNWVxza) | |116|maru3096|[Codepen](https://codepen.io/deamru/pen/vYMoybN?editors=1111)| |117|asabulu_von_f|[Codepen](https://codepen.io/asabulu/pen/GRLVNPq)| | 118 | zito | [Codepen](https://codepen.io/zito1130/pen/NWmQjdR) | | 119 | Schnauzer | [Codepen](https://codepen.io/Cocker-Spaniel/pen/poBMroM) | | 120 | tzhengliin | [Codepen](https://codepen.io/tzhengliin/pen/JjVgOGP) | | 121 |mike00712| [Codepen](https://codepen.io/buliyuil-the-animator/pen/QWPRoJe) | | 122 | arielyao | [Codepen](https://codepen.io/ArielYao822/pen/jORgYRq) | |123|靜靜|[Codepen](https://codepen.io/iclai/pen/mdgNXEN)| |124|Eileen|[Codepen](https://codepen.io/Eileen-io/pen/yLrmKpZ)| |125|Yini Chen| [Codepen](https://codepen.io/CYini/pen/MWRNVzM) | |126|黛西| [Codepen](https://codepen.io/ChiashengLin/pen/LYvwmdQ) | |127|咖| [Codepen](https://codepen.io/daru-Ga/pen/mdgNzeY) | |128|Aasta| [Codepen](https://codepen.io/Aasta-the-typescripter/pen/yLrmQrW) | |129|weeixunzht| [Codepen](https://codepen.io/CalebZhang/pen/qBwegvG) | |130|jimmy.0706| [Codepen](https://codepen.io/WeiJun-Mao/pen/JjqPKyj) | |131|marklan| [Codepen](https://codepen.io/fantasybluz/pen/QWRLdgm?editors=1100) | |132|勾小勻| [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/vYwBgVx) | |133|Sonia| [Codepen](https://codepen.io/YUJOU/pen/RwmbZjy?editors=1111) | |134|達達| [Codepen](https://codepen.io/Adam-Tsai/pen/MWdgOwG) | |135|Rayne| [Codepen](https://codepen.io/Kelsier/pen/ZEZdjoz) | |136|Areta|[Codepen](https://codepen.io/Areta-Gu/pen/MWdgXwb)| |137|嵬|[Codepen](https://codepen.io/Obivld/pen/BaeBVez)| | 138 | kevinwen2014 | [Codepen](https://codepen.io/wenwoo/pen/vYwBzLJ) | |139|discat3119|[Codepen](https://codepen.io/dizzysoup/pen/WNBeqpZ) | |140|wan_ju|[Codepen](https://codepen.io/Laura21/pen/mdYdPEa) | |141|Guan(yangguan.)|[Codepen](https://codepen.io/Yang-guan/pen/bGyGgBq) | |142|Jainee|[Codepen](https://codepen.io/Jainee0110/pen/WNBNKZE) | |143|PoWei#8484|[Codepen](https://codepen.io/Po-Wei-Lai/pen/NWVWoMq) | |144|Sana|[Codepen](https://codepen.io/-Chouno/pen/ExzavmY)| |145|easonpan|[Codepen](https://codepen.io/easonpan0904/pen/yLWyzwV)| |146|黛Dye|[Codepen](https://codepen.io/Dye_Note/pen/dyEPZJB)| |147| 雪維 | [Codepen](https://codepen.io/Shawey/pen/RwmNBEW) | |148| haojing | [Codepen](https://codepen.io/hjxu/pen/OJYPGav?editors=1101) | |149| Ed huang | [Codepen](https://codepen.io/yide1986/pen/abrzrdm) | |150| khoo | [Codepen](https://codepen.io/yi8/pen/gOJbJyy?editors=1100) | |151| 小白 | [Codepen](https://codepen.io/xjbowjbr-the-builder/pen/bGydEpr) | |152| flyingcatman5487 | [Codepen](https://codepen.io/ysklpokt-the-looper/pen/qBGdGMj) | |153| Chieh | [Codepen](https://codepen.io/Wei-Chieh-T/pen/OJYyRRR) | | 154 | ZZ | [Codepen](https://codepen.io/Yong-Shao/pen/bGyVRzp) | |155|ErwinChiang| [Codepen](https://codepen.io/vsujlkjy-the-scripter/pen/yLWYoZR?editors=1111)| <!--【快速複製】 | num | user | [Codepen]() | -- >
Last changed by  
 
六角學院 - HexSchool
萬人學生好評推薦，由淺入深的實戰繁中程式設計教學，每週線上互動社群交流問答會！ 適合無經驗新手入門。帶您學會一技之長。線上帶你學會程式開發。
588

Read more

🏅 Day 33 - Firebase Storage

Firebase Storage

5/17/2024
🏅 切版任務 Day17 - Flex 與 RWD 練習

練習運用 flex 技巧並隨著瀏覽器寬度變換排版

5/17/2024
🏅 JS 任務 Day17 - 陣列操作

陣列索引，點出是第幾筆資料

5/17/2024
🏅 JS 任務 Day15 - 陣列物件資料處理

請透過 addContent 函式，來增減 obj 物件內容。

5/17/2024
Read more from 六角學院 - HexSchool
Published on HackMD