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

## **設計稿的文字設定** ![](https://imgur.com/ID4s5cM.png) > 字體大小與行高請觀看 [Day11 每日任務](https://hackmd.io/HA9OsNUBTA-_gFkyhP16Mw) ### **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.在 Styles 區塊選擇需要的文字粗細與斜體，點選下圖按鈕 ![](https://i.imgur.com/vijJTiz.png) 可以看到右邊會出現已選擇的樣式 <img width="300px" src="https://imgur.com/UjoHZKn.png"> 然後下方會**提供兩種方式載入（擇一使用）** <img width="300px" src="https://imgur.com/xl6c1u0.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 範例](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 / 答案 | |:-:|:-:|:------------------------------------------------------------:| | 00 | 博派變形金剛#0959 | [Codepen](https://codepen.io/chan-chen/pen/vYQRxpr) | | 01 | Eden.C | [Codepen](https://codepen.io/iseden/pen/VwVyWvp)| | 02 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/PoxEjPQ) | | 03 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/oNQpwjY) | | 04 | Morning#7336 | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/bGQaREj) | | 05 |hebin.|[Codepen](https://codepen.io/landyhsiao776/pen/yLQpXJW)| | 06 |Moreene|[CodePen](https://codepen.io/Moreene/pen/MWzroYR)| | 07 |billy_ti|[CodePen](https://codepen.io/Ti-Show/pen/rNQpweN)| | 08 |pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/KKrZqME)| | 09 |cest_jessie|[CodePen](https://codepen.io/itsjessiechen/pen/ExOoXPj)| | 10 |Yu|[CodePen](https://codepen.io/yuch3n_chen/pen/abQEwWZ)| | 11 | Qi-Hua | [Codepen](https://codepen.io/emily40830/pen/jOQYwwR) | | 12 | townyuan | [Codepen](https://codepen.io/townyuan/pen/QWJagvo)| | 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/BaGJZZO) | | 14 | m_m | [Codepen](https://codepen.io/minnn7716/pen/vYQpZJW) | | 15 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/vYQpZWp) | | 16 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/dyQJRJz) | | 17 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/zYMpzwr) | | 18 | 慈玲#8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/XWyVgEd)| | 19 | runweiting | [Codepen](https://codepen.io/weiting14/pen/vYQpZRd) | | 20 | Vic_liou | [Codepen](https://codepen.io/allenliou-java/pen/LYXeLmL) | | 21 | 阿榮#8277 | [Codepen](https://codepen.io/codeitaday/pen/yLQpXjL) | | 22 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/abQEwGB) | | 23 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/MWzroVY) | | 24 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/YzRYQVr) | | 25 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/jOQYwpg) | | 26 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/bGQaRjZ) | | 27 | Ann Chou#0146 | [Codepen](https://codepen.io/annchou_illu/pen/KKrZqGP) | | 28 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/BaGJZOv) | | 29 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/eYQyRoz) | | 30 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/XWyVgoj) | | 31 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY) | | 32 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/yLQpoLO) | | 33 | .icesam | [Codepen](https://codepen.io/icesam/pen/KKrZvwd) | | 34 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/PoxEKqg?editors=1100) | | 35 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/) | | 36 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/OJazjBV) | | 37 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/GRwyvPR) | | 38 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/NWEXvaG?editors=1100) | | 39 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/vYQpJbo) | | 40 | Cura | [Codepen](https://codepen.io/curalin/pen/eYQyGOr) | | 41 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/ZEmvXYx) | | 42 | Uli | [Codepen](https://codepen.io/uli1313/pen/ExOowad) | | 43 | Martin | [Codepen](https://codepen.io/markyourpage/pen/RwqxLRW) | | 44 | MKL | [Codepen](https://codepen.io/Code-My/pen/rNQpGjq) | | 45 | Ting.66 | [Codepen](https://codepen.io/Ting66/pen/wvQpree?editors=1100) | | 46 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/PoxEJEp) | | 47 | PayRoom | [Codepen](https://codepen.io/water38198/pen/rNQpGdP) | | 47 | peggydbc1217 | [Codepen](https://codepen.io/peggydbc1217/pen/LYXezrE) | | 48 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/qBQpPLd) | | 49 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/GRwyMPm) | | 50 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/KKrZXxB?editors=1100) | | 51 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/PoxEOYO) | | 52 | SmallP | [Codepen](https://codepen.io/smallp/pen/XWyVzdW) | | 53 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/yLQpPgd) | | 54 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/MWzrOXY) | | 55| yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/zYMpPMo) | | 56 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/qBQpVGP) | | 57 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/zYMpPgZ) | | 58 | 阿沁#8176 | [Codepen](https://codepen.io/a8322342/pen/ZEmvvXK) | | 59 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/GRwyyyb) | | 60 | shcopy | [Codepen](https://codepen.io/shcopy/pen/RwqxLdp) | | 61 | Long | [Codepen](https://codepen.io/Loonng/pen/GRwyQEq) | | 62 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/gOQovJx) | | 63 | WA | [Codepen](https://codepen.io/ldddl/pen/QWJamLV) | | 64 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/poQpLdX) | | 65 | awei| [Codepen](https://codepen.io/hong-wei/pen/eYQyrPe?editors=1100) | | 66 | yuling#1634 |[Codepen](https://codepen.io/igzdflpu/pen/WNYdJWo)| | 67 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/RwqxJWN) | | 68 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/xxQpzVM) | | 69 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/oNQpyPX?editors=1100) | | 70 | Randy | [Codepen](https://codepen.io/landy510/pen/vYQpaLm?editors=1100) | | 71 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/QWJaOmR?editors=1111) | | 72 | wind | [Codepen](https://codepen.io/wind7y/pen/KKrZBrP) | | 73 | 狸貓 | [Codepen](https://codepen.io/tanuki320/pen/GRwyXWe) | | 74 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/mdQpGxY) | | 75 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/jOQYvgm) | | 76 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/poQpxPa) | | 77 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/LYXegwG) | | 78 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/rNQpQyN) | | 79 | 棠棠 | [Codepen](https://codepen.io/bobo52400/pen/QWJaJrP) | | 80 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/gOQoZOZ) | | 81 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/PoxEXmv) | | 82 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/KKrZbeN) | | 83 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/OJazdYx) | | 84 | Lesly#1279 | [Codepen](https://codepen.io/LeslyChang/pen/NWEXmqQ) | | 85 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/zYMpazy) | | 86 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/KKrZjYP) | | 86 | 0naomi0 | [Codepen](https://codepen.io/0Naomi0/pen/vYQporP) | | 87 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR) | | 88 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/WNYMeBz) | | 89 | rjjq | [Codepen](https://codepen.io/rjjq/pen/eYQVYQp) | | 90 | 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/zYMRxYN) | | 91 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/PoxQwyY) | | 92 | Chung#5786 | [Codepen](https://codepen.io/fotdclxz-the-encoder/pen/bGQLdWq) | | 93 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/qBQxObb) | | 94 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/dyQdGWK?editors=1100) | | 95 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/abQqdMG) | | 96 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/dyQdOLY) | | 97 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/gOQvoBN) | | 98 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/NWEyygp) | | 99 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/eYQVrmJ) | | 100 | Celine#6773 | [Codepen](https://codepen.io/celinephoebe/pen/YzReLNv) | | 101 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/vYQdjvb) | | 102 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/wvQyjLa) | | 103 | .ztion | [Codepen](https://codepen.io/ztion/pen/YzRevZm) | | 104 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/gOQvdad) | | 105 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/WNYMYgY) | | 106 | bbbear#7545 | [Codepen](https://codepen.io/Bearice/pen/xxQWbZg) | | 107 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/yLQKNoz)| | 108 | green760223 | [Codepen](https://codepen.io/lawrence-yi-hsuan-chuang/pen/rNQdLZB) | | 109 | peggy#3169 | [Codepen](https://codepen.io/peggylai/pen/eYQMBKr?editors=1100) | | 110 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/WNYzoLO) | | 111 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/gOQegag?editors=0100) | | 112 | stoos_1369 |[Codepen](https://codepen.io/Stooss/pen/xxQWzjy)| | 113 | KuoMin |[Codepen](https://codepen.io/KuoMin/pen/zYMWaXm)| | 114 | FanJJ#8061 |[Codepen](https://codepen.io/yfchenn/pen/NWEYoGq)| | 115 | 歐陽龍龍#1061 |[Codepen](https://codepen.io/dizzydog-rgb/pen/BaGrerj)| | 116 | ryanchiang_ |[Codepen](https://codepen.io/ryanchiang/pen/YzRLyRp)| | 117 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/vYQjrjM) | | 118 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/QWJQZLK) | | 119 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/WNYJLbK) | | 120 | Eason#7884 | [Codepen](https://codepen.io/ASLEO/pen/RwqymJO) | | 121 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/yLQEJxE) | | 122 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/ExORZQr) | | 123 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/abQKWqV) | | 124 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/VwVBGOp) | | 125 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/OJawrLb) | | 126 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/ZEmMEZx) | | 127 | EY | [Codepen](https://codepen.io/EY-chen/pen/VwVGWBR) | | 128 | celia9182 | [Codepen](https://codepen.io/celia01/pen/ZEmqEve) | | 129 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/wvQYNmX?editors=1100) | | 130 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/KKrGEKO) | | 131 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/YzRREgJ) | | 132 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/poQQqXp) | 133 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/PoxVwbg) | | 133 | albee#9121 | [Codepen](https://codepen.io/albee-chang/pen/KKrEjXB) | | 134 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/MWzxNQw) | | 135 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/GRwbWwO) | |136|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/dyQxQXK)| | 137 | lin_lion | [Codepen](https://codepen.io/Lion-Lin/pen/JjegqLE?editors=1100) | | 138 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/poqeYoq) | | 139 | Mia小福#4473 | [Codepen](https://codepen.io/a0950271/pen/VwqyBMq) | | 140 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/bGZGKmW) | - 快速複製格式： ```markdown! | 0 | user | [Codepen]() | ```