Vibe Coding 字體指南：用文字風格定義網頁靈魂
在 Vibe Coding 的世界裡，除了追求功能的實現，更是整體氛圍的營造，如果說色彩決定了網頁的溫度，那麼「字體」就決定了網頁的「語氣」，一個好的字體能瞬間提升作品質感，讓簡單頁面轉變成專業設計感的應用！這篇教學會介紹網頁的各種基礎字體，以及學會如何快速引入外部資源，讓網頁更上一層樓。
認識常用的字體類型 ( 通用字型 )
在選擇字體前，要先理解常見的幾種字體分類，透過指定的字體類型指令，AI 才能更精確產生理想的風格。而通用字型 ( generic-family ) 泛指是「作業系統的預設字型」或「瀏覽器的預設字型」，只要使用對應的關鍵字就能套用對應字型，CSS 支援的通用字型有五種名稱：
| 通用字型 | 說明 | 代表字型名稱 |
|---|---|---|
| serif | 襯線字型 | Georgia、Palatino、Times New Roman、Times |
| sans-serif | 無襯線字型 | Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana |
| monospace | 等寬字型 | Courier、Courier New、Consolas |
| cursive | 手寫字型 | Comic Sans ( 或 Comic Sans MS ) |
| fantasy | 奇幻字型 | Copperplate、Papyrus |
如果使用下面的提示詞， AI 就會產生對應的字體。
請產生一個簡單的網頁，讓五個字體標題，分別呈現指定的通用字體：
- 文字：「serif 襯線字型」，使用字體：Times New Roman
- 文字：「sans-serif 無襯線字型」，使用字體：Arial Black
- 文字：「monospace 等寬字型」，使用字體：Courier
- 文字：「cursive 手寫字型」，使用字體：Comic Sans
- 文字：「fantasy 奇幻字型」，使用字體：Copperplate
serif ( 襯線字型 ) 與 sans-serif ( 無襯線字型 )
serif ( 襯線 ) 指的是字型筆畫末端的「裝飾」，這種字型看起來經典、正式又優雅，適合長篇閱讀或強調權威性的標題。sans 在法語中代表「無」，sans-serif 就表示為無襯線字型，與襯線字型相反，無襯線體完全拋棄裝飾襯線，只剩下主幹，造型簡明有力，更具現代感，也是目前大多數網頁 UI 的首選。
下圖文字「紅色的部分」就是襯線。
作業系統常用的 serif 襯線字型：Georgia、Palatino、Times New Roman、Times。
作業系統常用的 sans-serif 無襯線字型：Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana。
monospace ( 等寬字型 )
等寬字型表示所有的字母、數字都是「同樣的寬度」，對於中文而言，每個字在設計上多都是等寬，但英文字母的寬度就存在極大的差異 ( 例如 W、i、l 的寬度非常不同 )，*如果指定 monospace ( 等寬字型 )，每個字母、標點符號與空白的寬度都會相同。
作業系統常用的 monospace 等寬字型：Courier、Courier New、Consolas。
cursive ( 手寫字型 )
cursive 手寫字型使用大量的曲線或類似襯線的裝飾，讓文字更接近「手寫」或「草書」的風格，作業系統常用的 cursive 手寫字型為：Comic Sans ( 或 Comic Sans MS )
fantasy ( 奇幻字型 )
fantasy 奇幻字型和手寫字型有點類似，基本上只要不屬於上述四種類型的字型，都會被定義為 fantasy，作業系統常用的 fantasy 奇幻字型為：Copperplate、Papyrus。
跨平台顯示的秘訣：整合多組字型
在網頁開發中，無法保證使用者的電腦裡一定有某些字型，因此通常會使用「整合多組字型」的方式，在 CSS 中設定一連串的字體，瀏覽器會從左到右尋找，直到找到第一個可用的字型為止，舉例來說，下方是透過 CSS 整合「原生系統字體」與「網頁安全字體」是確保網頁在 Windows、Mac、iOS 與 Android 都能完美顯示的寫法：
/* 這串寫法能呼叫各平台最漂亮的系統介面字體 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
然而在 Vibe Coding 中雖然不需要自己寫 CSS，但仍然需要學會如何「下指令」，下面的提示詞會讓網頁中不同區域的文字，呈現不同的字體，且如果在不支援微軟正黑體的 Mac 系統，會呈現蘋方體。
請幫我產生一個簡單的網頁，裡面是簡單的 OXXO 虛構自我介紹，中間會穿插一段簡單的英文，使用下方字體呈現標題和內文：
- 全站字體：系統內建無襯線字體
- 標題字體：優先使用 Arial，接著依序使用「微軟正黑體」、「蘋方體」
- 穿插的英文字體：Monospace
使用外部字體 ( Google Fonts )
如果系統預設的字體不能滿足 Vibe Coding 的需求，就可以開始使用外部字體，而 Google Fonts 是 Vibe Coding 最推薦的字體資源，不僅完全免費而且載入速度也非常快。Google Fonts 是 Google 提供的免費字型平台，可以從中選擇想要的外部字型，將其下載使用或透過 API 直接連接使用，從下方網址可以前往 Google Fonts，進入後可以點擊想要的字型，並且輸入文字觀察效果。
前往 Google Fonts：[https://fonts.google.com/](前往 Google Fonts：https://fonts.google.com/)
選擇的字型後 ( 範例挑選 Smooch Sans )，點擊右上方「Get font」。
點擊「Get embed code」，查看外部載入字體的寫法。
從 Get embed code 裡面可以看見使用 CSS link 或 @import 載入字型的方法，通常只要點擊複製按鈕，將下方的程式碼複製並提供給 AI，AI 就會使用這個字體。
下方的提示詞會提供 AI 這個字體的 Google Fonts 連結，AI 就會套用對應的字體。
請用一個簡單的網頁呈現 h1~h6 六個標題，標題內容都是「Hello World!! I am OXXO!!」，字體使用 Google Fonts 的字體，字體程式碼如下：
<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=Smooch+Sans:[email protected]&display=swap" rel="stylesheet">
.smooch-sans-<uniquifier> {
font-family: "Smooch Sans", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
}
不過因為 Google fonts 非常多人在使用，大部分字體甚至不需要提供程式碼，只需要提供這個字體的連結，AI 就會自動套用這個字體，下方的提示詞會套用兩種不同字體。
請用一個簡單的網頁，呈現左右兩組 h1~h6 六個標題，標題內容都是「Hello World!! I am OXXO!!」。
- 左邊字體：https://fonts.google.com/specimen/Smooch+Sans
- 右邊字體：https://fonts.google.com/specimen/Lavishly+Yours?categoryFilters=Feeling:%2FExpressive%2FFancy
使用外部字體 ( 自定義字體連結 )
如果連 Google Fonts 都沒有所需的字體，或者有非常特別的字體需要額外呈現，則可以將字體部署在自己的伺服器或 GitHub，如果要把字體部署到自己的伺服器或 Github，建議先將字體轉換成 .woff2 格式，這種格式壓縮率最高，能有效減少中文字體體積過大的問題，下圖將一個特殊字體，透過 cloudconvert 服務轉換成 .woff2 格式。
轉換字體後，參考「使用 GitHub 部署你的網頁作品」教學，將這個字體上傳到 Github，並產生公開連結。
有了字體公開連結後，只需要把字體的名稱和連結提供給 AI，就可以產生套用的字體 ( 範例連結有可能會刪除，請使用自己的公開連結 )。
請用一個簡單的網頁呈現 h1~h6 六個標題，標題內容都是「Hello World!! I am OXXO!!」，字體設定如下：
- 字體名稱：oxxotest
- 字體連結：https://oxxostudio-demo.github.io/share-fonts/test.woff2
使用外部字體注意事項
只要使用外部資源，就一定會有載入的時間或一些限制，下方列出一些注意事項：
字體沒有顯示
- 檢查路徑：GitHub 的檔案路徑區分大小寫。
- 檢查跨域問題：如果不是使用 GitHub Pages 網址，瀏覽器可能會因為安全性問題封鎖字體。
- 等待更新：由於瀏覽器快取，可能需要重新整理幾次才能看到變化。
中文字體載入太慢
- 使用預設字體：中文字字體檔案通常都很大，建議使用系統字體。
- 只使用特定字元：如果真的有需求，可以使用工具只擷取標題會用到的字元，將 10MB 的檔案縮小至 100KB。
使用替代字體
提供 AI 替代字體的提示，例如：「
在設定自定義字體時，請務必在 @font-face 中加入 font-display: swap;。同時，請設定一組與目標字體風格（ 如襯線或無襯線 ）接近的字體」
小結
字體是網頁設計的靈魂，它能直接傳達出產品的「個性」，在 Vibe Coding 的過程中，善用 Google Fonts 並搭配之前學過的 Vibe Coding 知識，就能在最短時間內打造出專業級的作品。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～