---
# System prepended metadata

title: "\U0001F3C5 Day 10 - 文字設定（font-family、font-weight、font-style）"
tags: [網頁切版直播班 - 2025 夏季]

---

# Hw1 校園接駁車管理系統（單機版本）


### I. Introduction

請在 RPi 上撰寫一支校園接駁車系統。讓使用者可以選擇要去哪個站點、選擇票種與張數，並在送出訂單後看到車輛接近進度與應付金額，最後順利上車。


### II. Specification
系統一次只需服務一名使用者，待此使用者完成搭乘（模擬到站）後才進行下一次服務。

系統內有三個接駁站點（距離代表車子到你的距離）

* Library Stop（距離 3km）

* Gym Stop（距離 5km）

* Dorm Stop（距離 8km）

每個站點提供兩種票種

1)Library Stop

* student ticket: $30

* regular ticket: $50

2)Gym Stop

* student ticket: $40

* regular ticket: $60

3)Dorm Stop

* student ticket: $55

* regular ticket: $80

選單動作主要分為:
主選單：

1. stop list：顯示站點與距離

2. order：開始訂位（選站點 → 選票種與張數 → confirm/cancel）

order 流程：

* 先選擇站點（Library / Gym / Dorm）
* 進入該站點的票種選單後，有以下指令可用：

1. 票種1：選票種1，輸入張數
2. 票種2：選票種2，輸入張數
3. confirm：送出訂單，開始模擬接駁車接近
4. cancel：取消訂單，回主畫面

I/O 與顯示（完全沿用原作業規格）
Terminal

用數字鍵選單、輸入張數

顯示選單或系統狀態

7-Segment（顯示應付金額）

在 confirm 後顯示使用者應付金額

先顯示最高位，之後每 0.5 秒顯示下一位

最後停在個位數不再變動

例如金額 1140：顯示 1 -> 1 -> 4 -> 0，最後停在 0

LED（顯示接駁車接近進度）

confirm 後用 LED 顯示「車子距離正在縮短」

若距離 8km：一開始亮 led1~8

若距離 5km：一開始亮 led1~5

若距離 3km：一開始亮 led1~3

每 1 秒減少一個燈

燈全滅代表「車已到站」

範例（距離 3km）：

led1~3 → led1~2 → led1 → 全滅
### **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-size、行高 line-height、文字粗細 font-weight
![](https://hackmd.io/_uploads/SkOdd1Dzel.png)


### **font-style**

預設值為 normal。
`font-style: italic;` 將文字變為斜體。

## 題目

請依照課程最終作業一設計稿，使用該 [CodePen](https://codepen.io/fhljksmg-the-styleful/pen/RNNOWEN?editors=1100) 將下方程式碼「...」部分加入文字樣式設定
![](https://hackmd.io/_uploads/Bk7JYyPMgl.png)


### 標題樣式
![](https://hackmd.io/_uploads/SJnWtkDfll.png)

### 內文樣式
![](https://hackmd.io/_uploads/ByYXKkPfxl.png)


```htmlembedded=
<div class="container">
  <h4 class="title">
    品牌簡介
  </h4>
  <h5 class="subtitle">
    URBNSTEP 是來自台灣的街頭機能鞋品牌，致力於打造「風格與功能並存」的鞋履體驗。
  </h5>
  <p class="content">
    在城市與日常的交錯中，我們看見了步伐的力量。URBNSTEP 誕生於一群設計師與文化觀察者的交會點——一個相信風格應該來自「真實場景」而非伸展台的團隊。從都市的清晨街角，到午後光影灑落的人行道，我們捕捉的是那些不被刻意編排的時刻，那些用一雙鞋踏出的態度與節奏。每一款鞋的誕生，不只是設計與工藝的結晶，更是一段來自城市靈感的延伸，我們相信：鞋，是穿在腳上的語言。
  </p>
  <p class="content">
    URBNSTEP 的名字來自 Urban + Step，代表著我們對每一個走進城市生活的人致敬。我們不追逐潮流，我們關注輪廓、材質、穿著者的心境與身型，創造能陪伴你走進自我節奏的經典之作。選用高品質麂皮、織物與天然橡膠大底，並與獨立插畫家、攝影師合作，打造具有街頭詩意的形象風格。URBNSTEP 相信，美不是炫耀，而是由內而外的呼吸——一雙鞋，剛好說出你心中的樣子。
  </p>
</div>
```

> ==CSS 的部分要記得載入字體==，若還不熟悉可以回顧 [Day9 任務](https://hackmd.io/iYPoGB0ISsq2ez-4DU9ccw)，或是參考課程影片「字體設定全攻略」。

```css=
body{
  font-family: 'Noto Sans TC', serif;
  color: #212529;
}

.container {
  max-width: 856px;
  margin: 0 auto;
}

.title {
  ...
  ...
  ...
  margin-bottom: 24px;
}

.subtitle {
  ...
  ...
  ...
  margin-bottom: 16px;
  color: #57A203;
}

.content {
  ...
}

```



### 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/Wbvezpa?editors=1100
-->

### 回報區

|  #  | Discord | CodePen / 答案 |
|:---:|:-------:|:--------------:|
| 01  | Jenna  | [Codepen](https://codepen.io/abiscc14/pen/MYwLxoM)|
| 02  | 孟  | [Codepen](https://codepen.io/Mengru0503/pen/ogXmVeB)|
| 03  | Katie  | [Codepen](https://codepen.io/Katiekatiehsu/pen/ZYGwPXg?editors=1100)|
|  04  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/KwpJEZY?editors=1100) |
|  05  |  Esther  |[Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/gbpqEBK?editors=1100) |
|  06  |  立花  |[Codepen](https://codepen.io/kj25940858/pen/yyNZwwL?editors=1100) |
|  07  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/GgJzeYd?editors=1100)|
|  08  |  Satar  |[Codepen](https://codepen.io/SatarKuo/pen/ZYGwPNb?editors=1100)|
|  09  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/gbpqEJd)|
|  10  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/JodxVPJ) |
|  11  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/GgJzLow) |
|  12  |  Jerome  |[Codepen](https://codepen.io/qsc002163/pen/raVPbLW?editors=1100) |
|  13  |  那個貓貓  |[Codepen](https://codepen.io/zorakao/pen/PwqVgGL?editors=1100) |
|  14  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/dPoaLRK) |
|  15  |  Joseph_Kyuu  |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/wBaNZZK) | 
|16|Saika|[Codepen](https://codepen.io/saika4501/pen/RNPvOdm?editors=1100)|
|  17  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/azOXxrK) |
|  18  |  pastor  |[Codepen](https://codepen.io/peter_hung/pen/xbGMeNJ) |
|  18  |  Klaus Chen  |[Codepen](https://codepen.io/Klaus-Chen/pen/NPqoVgj) |
|  20  |  Sylvie  |[Codepen](https://codepen.io/shuping-xiao/pen/RNPvmbX?editors=1100) |
|  21  |  suemma  |[Codepen](https://codepen.io/suemma/pen/EajrBoV)|
|  22  |  力文  |[Codepen](https://codepen.io/liwenchiou/pen/gbpqNEj?editors=1100)|
| 23 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/QwbYeEW?editors=1100)
|  24  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/WbvPVxe?editors=1100) |
|  25  |  柔術小子  |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/KwpJjJO) |
|  26  |  Sid  |[Codepen](https://codepen.io/monkeybear721/pen/yyNZmxg?editors=1100) |
|  27  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=jEPdgKq) |
|  28  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-/pen/emNxqbE?editors=1100)| 
|  29  |  JiaMori  |[Codepen](https://codepen.io/jiamori/pen/qEdvWag) |
|  30  |  西娜  |[Codepen](https://codepen.io/Sheena-the-encoder/pen/yyNwBXv) |
|  31  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/ogXVvOX) |
|  32  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/YPXgzRE?editors=1100) |
|  33  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/jEPJEwP) | 
|  34  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/azOMzwL) |
|  35  |  Geno Chen  |[Codepen](https://codepen.io/kai-chen-the-sans/pen/QwbowJN?editors=1100) |
|  36  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/WbvmbBx) |
|  37  |  CBK  |[Codepen](https://codepen.io/BK-C-the-styleful/pen/LEVaEog) |
|  38  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/RNPdPrb?editors=1100) |
|  39  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/jEPJEer?editors=1100) |
|  40  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/qEdvdJe) |
|  41  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/pvJYjyQ) |
|  42  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/JodzYWG?editors=1100) |
|  43  |  Yan*  |[Codepen](https://codepen.io/Yan-L/pen/vEOPNXx?editors=1100) |
|  44  |  ahga  |[Codepen](https://codepen.io/zmapzfdv-the-vuer/pen/JodzRYJ) 
|  45  |  Fang  |[Codepen](https://codepen.io/Fang-the-encoder/pen/gbpEmey)
|  46  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/qEdvrzM)
|  47  |  Gloria  |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/raVRwOb?editors=1100) |
|  48  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/VYLRWMP?editors=1100) |
|  49  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/zxGbzVq?editors=1100) |
|  50  |  Chia__  |[Codepen](https://codepen.io/Chia-the-encoder/pen/emNXEeB) |
|  51  |  LouisaFish  |[Codepen](https://codepen.io/Louisa-Fish/pen/YPXgrXM?editors=1100) |
|  52  |  随縁  |[Codepen](https://codepen.io/anki0072011/pen/ByNbGMP) |
|  53  |  Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/VYLRgqw) |
|  54  | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/gbpENag) |
|  55  | Huang Eagle |[Codepen](https://codepen.io/YuCi/pen/dPoLYpY) |
|  56  |  Hao  |[Codepen](https://codepen.io/Howell/pen/LEVvZJZ) |
|  57  |  Scrooge  |[Codepen](https://codepen.io/yrkmdwch-the-encoder/pen/QwbPgZV?editors=1100) |
|  58  |  Alyssa  |[Codepen](https://codepen.io/AlyssaYen/pen/myJgMOx?editors=1100) |
|  59  |  TY  |[Codepen](https://codepen.io/Ted-Y/pen/gbpyqPJ?editors=1100) |
|  60  |  ying  |[Codepen](https://codepen.io/Lara-Lin/pen/emNowJj?editors=1100) |
|  61  |  Peggy  |[Codepen](https://codepen.io/Peggy_C/pen/wBabwwL?editors=1100) |
|  61  |  kate_bearchou  |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/KwpLMMZ?editors=1100) |
|  62  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/jEPoVOE) |
|  63  |  Michelle  |[Codepen](https://codepen.io/bastar_dize/pen/JodqgmE?editors=1100) |
|  64  |  tanuki_狸貓  |[Codepen](https://codepen.io/tanuki320/pen/ByNgdGP?editors=1100) |
|  65  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/vEOPNqd) |
|  66  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-https://hackmd.io/@hex-courseanimator/pen/NPqZeBL) |
|  67  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/WbvVQGx) |
|  68  |  YUCCC  |[Codepen](https://codepen.io/taroooo/pen/ogXKLRK?editors=1100) | 
|  69  |  Atian  |[Codepen](https://codepen.io/A-Tian-Chen/pen/emNqgaj) | 
|  70  |  Antonio  |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/dPoxabN) |
|  71  |  雅潔  |[Codepen](https://codepen.io/MOMOYA/pen/JoYdGoM) | 
|  72  |  B  |[Codepen](https://codepen.io/Babel777/pen/OPyJeZG) | 
|  73  |  Lika  |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/yyYNWxq) | 
|  74  |  Fancy  |[Codepen](https://codepen.io/Fancy-the-lessful/pen/YPyXmRB?editors=1100) | 
| 75 | water | [Codepen](https://codepen.io/wateruby/pen/wBKKqgb)|
|  76  |  主委加碼啦幹  |[Codepen](https://codepen.io/popbob-the-bashful/pen/YPywZOj) |
|  77  |  Lucy  |[Codepen](https://codepen.io/abiscc14/pen/MYwLxoM) |
| 78 | 小趴 | [Codepen](https://codepen.io/papa2415/pen/dPYMWvq)|
| 79 | 伊迪 | [Codepen](https://codepen.io/eku10rei/pen/QwjNQxE?editors=1100)|
| 80  |  cindy  |[Codepen](https://codepen.io/a50134/pen/MYajXvw?editors=1100)|
| 81  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/yyYadjX?editors=1100)|
| 82 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/GgpNEQb) |
| 83 | Tou | [Codepen](https://codepen.io/Datou-Huang/pen/QwjdXBb?editors=1100)|
|  84  | Midy Wu  |[Codepen](https://codepen.io/work-wu/pen/WbQZxyz) | 
|  84  | Mini  |[Codepen](https://codepen.io/miiinii32-Cheng/pen/jEbZjmb) | 
| 85 | 4ping | [Codepen](https://codepen.io/928Libra/pen/LEpmdmO)
|  86  |  maerc  |[Codepen](https://codepen.io/Lu-Liangyu/pen/ByoqeQg?editors=1100) |
|  87  |  Wafa  |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/gbaZybM)|
|  88  |  PAgaNiNi  |[Codepen](https://codepen.io/PA-OTTER/pen/empooMy?editors=1100)|
|  89  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ZYQzWyy?editors=1100)|



<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->

