隨著 AI 開發工具越來越聰明，社群上可以看到許多人分享各式各樣，實用又美觀的詠唱小工具。你也想用 vibe coding 做出漂亮網頁，但就是覺得字體不夠好看、選擇不夠多、不夠有特色嗎？
本篇教你去哪找字體、如何使用，還有我們推薦的字型組合！
- AI 協作的字型版權注意事項
- Google Fonts 使用方式
- emfont 使用方式
- Adobe Fonts 使用方式
- 推薦字型
- Vibe Coding 用字與排版提醒
AI 協作，字型版權要注意！
在進入正題之前，提醒各位使用 AI 工具時，務必注意各個字型的版權規範。
目前絕大多數付費購買的字型產品，不允許「變更檔案類型」、「直接打包上傳網頁」，「嵌入式授權」則多數需要另外行洽談。因此，在跟 AI 一起工作時，記得先告訴 AI 這些限制。
另外，目前 justfont 的授權合約中，不允許機器學習（justfont 通用授權第參條第三項）、不允許分享給其他人（justfont 通用授權第壹條）。
因此，以下行為在 justfont 的規範中都是禁止事項：
- 將 .ttf 或者 .otf 檔案改成網頁字型檔（如 .woff、.woff2 等等），否則違反 justfont 通用授權第參條第二項
- 將字型檔上傳到 GitHub、共用的 Google Drive，或其他你儲存專案並且與他人共享的線上服務，否則屬於分享給他人
關於字型授權使用，AI 給出的答案可能有所偏誤，建議仔細閱讀各個付費、免費、開源字型的授權條款，或者直接詢問字型廠商或者字型提供者。更完整的字型版權觀念，請看以下詳細介紹：
開始 Vibe Coding 做小工具之前，先認識什麼是網頁字型
要在網頁上使用字型，許多人的直覺是把字型一起打包上傳；每次載入網頁時，頁面會先下載整包字型才顯示。
但漢字字數實在太多，單一字型檔的大小，動輒 5~6M，甚至有達到 10M 以上的字型檔案。在瀏覽時下載整個字型檔，所需要花費的時間、流量可想而知。
而網頁字型機制，是依據頁面上使用的文字，動態地產生並下載需要的檔案。比如頁面顯示「更好的文字風景」，機制自動抓取相關文字，而不載入無關的文字。透過網頁字型機制，可以有效減少檔案大小，加快速度，瀏覽者也不需要另外安裝本機字型，十分方便。
也因為網頁字型機制與一般排版印刷使用的字型機制不同，通常需要另外授權，而且有一套專屬的使用方法。在 Vibe Coding 的時代，不懂得網頁字型機制沒關係，但至少要知道如何提示 AI 正確地引入字型，而不是傻傻的上傳整包字型檔。
Vibe Coding 網頁字型去哪找？怎麼用？
Google Fonts：免費、風格多、多語種支援完善
由 Google Fonts 提供的字型服務，蒐羅世界各地品質頗佳的開源字型，使用時不用擔心版權問題，穩定性也很足夠。尤其因為是大型主流網頁，用很簡單的指令，AI 就懂得使用了。
作為全球科技巨擘，Google Fonts 支援全世界諸多語種，也不錯過台灣的本土語言和注音！此外，還有提供十分完整的圖標、Emoji 字型等等。
不論你的需求是什麼，都非常推薦從 Google Fonts 開始學習如何使用網頁字型。
使用方式 A：一切交給 AI 的方法
- 在 Google Fonts 上搜尋想要的字型，複製該字型網頁。
- 告訴 AI「引入 Google Fonts 以下字型」，並貼上你選好的字型網址。
- 這個方法會需要授權 AI 夥伴搜尋網頁，有時候會搜尋失敗，需要注意！
使用方式 B：人工多一點，但比較保險
- 在 Google Fonts 上搜尋想要的字型後，點入字型頁面，按下右上方的「Get font」按鈕。此時右上角的購物袋圖示，會出現你目前已經取得的字型數量。
- 將所有喜歡的字型，都加入購物袋之後，點擊打開購物袋。就和逛網路商店一樣，你可以在這裡檢查是否出現所有你所選擇的字型，或者要移除你不要的字型。
- 點擊右側「Get embed code」，選擇「Web」、「link」。
- 複製下面所有可複製的區塊，貼給你的 AI 夥伴並指示「引用 Google Fonts 字型」。
emfont：免費、中文為主
由大學生毛哥（開發時還是高中生）推出的 emfont 上，搜集許多中文字型，比起 Google Fonts 豐富不少。畢竟是台灣的網頁字型服務，對於本土語言的支援度也很完整。還收錄不少台灣人才知道的有趣字型產品，或者又怪又可愛的 icon 字型，如 justfont 推出的精靈文等，可以讓你的專案更加突出！
取用字型的方法可以全權交給 AI 處理（如 Google Fonts 的方法 A），不過如果你有點擔心的話，就需要一點點 HTML 和 CSS 的觀念，搭配毛哥提供、好懂易上手的使用說明，引入選好的字型。
以下提供完全交給 AI 的指令。
使用方式 A：完全交給 AI
- 選擇喜歡的字型，並且複製各個字型網址或名稱
- 給 AI 以下指令：
 - 這個方法會需要授權 AI 夥伴搜尋網頁，有時候會搜尋失敗，需要注意！
Adobe Fonts：付費、精緻、需要多一點人工處理
印刷與設計軟體巨頭 Adobe 同樣有網頁字型服務。如果你是 Adobe Creative Cloud 訂戶，就可以和平常使用 Adobe Fonts 一樣，在你的網頁上使用這些精美的字型產品。
Adobe Fonts 上所收錄的中文字型雖然不如 Google Fonts 多元，但是如果你可以接受日文字型，那選擇就非常精彩了（註） 關於使用日文字型可能會出現的問題，以及如何避免，請參考這篇文章〈下載字型前先看｜為什麼會缺字？〉。，歐文選擇也十分多元！特別適合美感要求高，且使用大量歐文、日文的網頁。
使用方式
- 使用有訂閱 Creative Cloud 的帳號登入 Adobe Fonts
- 在 Adobe Fonts 上找到想要的字型後，點擊字型資訊卡左下角，或者條列顯示的上方「</>」按鈕
- 從下拉選單中加入專案，並勾選想要的字重後，點擊「儲存」（第一次使用，彈出視窗會要求你建立專案；你可以為每個 Vibe Coding 作品單獨建立一個專案，方便管理）
- 按下儲存後，會出現各個字型名稱與細項資料，先逐一複製，暫存在自己的備忘錄中。
- 挑好字型後，在網頁右上方、帳號圖像左側「管理字體」選單中選擇「網頁字型專案」
- 找到你要的專案，並複製中間「嵌入專案」下方的程式碼
- 將程式碼貼給你的 AI 夥伴，並指示「引入 Adobe Fonts 字型」，還不要按送出喔！
- 回到 Adobe 網頁字型專案中，複製這個專案裡面所有字型名稱；字型名稱從左方卡片複製
- 將所有字型名稱，貼給 AI 夥伴，然後按送出
- 你的完整指令會長得像這樣：
引入 Adobe Fonts 字型：
[嵌入專案複製來的程式碼]
字型名稱：
[複製的字型名稱串]
推薦字型
學會快速新增字型後，還要知道怎麼選字才好看！以下區分不同風格、適合的網頁類型，各位可以視 vibe coding 作品需求來選擇。
科技、理財、報表、時程類的字型推薦
這類頁面需要比較科技感、易讀的字型，尤其數字整齊排列非常重要。因此建議選擇支援等寬（mono）數字的網頁字型。
IBM Plex Sans
繁體中文版：emfont｜英、日等其他語言與 Mono 版：Google Fonts
由 IBM 推出的訂製字型，融合人文感的筆觸、直角轉折、墨溝設計，顯得帥氣俐落，又不過度科技冷漠。字重完整，也特別推出等寬版本，在表格編排時十分好讀之外，用在 coding 介面上也很推薦。
Ubuntu
Linux 系統字型 Ubuntu 也是帶有人文感的無襯線字體。大量圓弧與直線的結合，比起 IBM Plex Sans 感覺更可愛一點。支援字重完整之外，還有窄體、等寬等選擇。不過 Ubuntu 只支援歐文，漢字部分可以搭配簡潔的源樣黑體，或者同樣結合圓弧筆型的 LINE Seed。
源樣黑體
採用印刷字寫法的源樣黑體，閱讀起來特別平穩。支援字重完整，也包含本土語言漢字和羅馬字，是非常符合台灣人需求、可以無腦選用的開源字型。
Line Seed
由 LINE 推出的訂製字型以黑體爲基底，加上稍微收圓的邊角，給人現代又可愛的閱讀體驗。字卡、長文都很適合，用在理財小工具、投資建議文、Coding 筆記、運動紀錄小工具等等上，少了一點冰冷，更有動力學習和挑戰！
教育、學習類小工具字型推薦
教育與學習類需要特別注意寫法、注音支援度、造形易辨性和易讀性，雖然規範比較多，但是有很優秀的選項。
Bopomofo Iansui／Iansui／芫荽
注音版：Google Fonts｜一般版：Google Fonts、emfont
符合教育部標準寫法，又有硬筆手寫輕巧感的芫荽，如今已經是許多人愛用的字型了。近期 Google Fonts 增加收錄注音版，更方便有注音需求的使用者。不過目前網頁字型對於破音字的支援還不是太完善，使用時仍需注意。
Playwrite
一樣都是歐文，各個國家的書寫習慣不太一樣。TypeTogether 團隊蒐集、分析 40 多個國家在小學階段的手寫教育字體，歸納出 70 餘種風格，找到包含傾斜角度、連筆程度等等差異，推出字型 Playwrite。
這個龐大的字型名稱中以各個國家區分，部分國家內部的風格差異也明確指出，另外還有附底線版本，提供教育者與學習者們，更量身定做的便利方案！
生活風格、旅遊紀錄、清新文藝風的網頁字型推薦
追求清爽、有氣質的美麗版面，比起跟別人長一樣的預設系統字型，更推薦仔細逛逛這些網頁字型服務，選擇符合個人風格的字型組合。
辰宇落雁體
原本是高中生的自主學習計劃，免費釋出後就造成轟動的辰宇落雁體，廣受喜愛的原因，自然是那個清新自然的漂亮造型。青春、文藝感十足的風格，特別適合短句呈現。如果你開發的是每日金句、出遊行程類的工具，辰宇落雁體是不二之選。不過偏細的手寫字，看起來會比同字集的印刷字型來的小，建議調整字級（font size）。
源石黑體
想追求文藝風格，但又怕螢幕閱讀不夠清楚的話，源石黑體的低調細節或許更適合你。比起前面介紹的源樣黑體多了喇叭口和腰身，看起來更復古，感覺老派又溫暖。尤其適合做長文閱讀小工具的人們。
筑紫明朝 Old（FOT-TsukuAOldMin）
想要更獨特的風格，就必須試試筑紫明朝 Old。中心收緊、撇捺舒張的造形，更顯文藝氣質。不過這是日本字型，在繁體中文支援度略有不足，建議拿來作為標題、小標題、標籤等點綴裝飾用。也可以搭配日文字型缺字檢查工具，增加支援度。加一點，就可以讓版面更優雅！
日記筆記、可愛風格、家庭小工具用字推薦
說到可愛、平易近人，不免冒出小朋友手寫的樣子，可能有點凌亂，可愛但放在介面上不夠好讀。其實，可愛還有很多面向。
jf Open 粉圓／Huninn
一般版：Google Fonts、emfont｜注音版：Google Fonts
可愛路線首選開源字型，自然是 jf Open 粉圓了。高度支援台灣本土語言同時，也收錄不少日文漢字。今天吃什麼、生活大冒險、乖寶寶家事集點卡之類的小工具，可愛又易讀的粉圓效果正好。比如芋圓辭典這類本土語言 App，也使用了粉圓字型。Google Fonts 同時收錄有注音版本，推薦給家長和老師們。
BIZ UDPMincho
在數位時代，明體因為粗細對比高，不利於螢幕閱讀而為人詬病。BIZ UDPMincho 橫筆較粗，山形也較為圓潤，在數位裝置上閱讀效果頗佳。整體造型方正好讀，更為平易近人。雖然是日文字型，不過支援字數還不錯，可用於標題、副標題、短文等處。
彣書 Wenwriting
想要找更與眾不同的手寫體？溫暖、流暢的彣書是少見的網頁字型手寫體選擇，也是 Adobe Fonts 上少有的台灣字型選項。支援多數台灣用字情境，包含本土語言等等，適合親友間的交換日記、家庭和生活紀錄、攝影作品紀錄等等網頁小工具。
又酷又怪又可愛的視覺系網頁用字推薦
饅頭黑體
改做自 Dela Gothic One，有著極粗筆畫和俏皮弧度，饅頭黑體是個可愛又搶眼的展示字型。Google Fonts 上收錄的 Dela Gothic One 是日本字型，對於繁體中文支援度不足，但饅頭黑體就很符合台灣人的使用需求啦！推薦用於輕鬆活潑主題頁面的卡片元件中。
精品點陣系列
以上字體都是現代數位字型，想要來點復古點陣風格，可以試試精品點陣系列。其中有不同的點陣比例、立體點陣、漸層點陣，應有盡有。尤其推薦給嘗試做復古小遊戲的人們。
精靈文
還覺得太正經，想要更具裝飾性？可以試試由書法家做作的 Daphne 結合歐文書法和注音符號寫成的精靈文。充滿魔性的神秘造型，適合用於遊戲、集點卡等網頁中。
圖標、Icon、Emoji 字型推薦
Google Fonts 提供的 Icon
Google Fonts 不只提供大量開源字型，還很貼心的準備了各種元素和圖標。你可以直接選擇想要的圖標，並複製右側面板中的各項程式碼給 AI；也可以把整個網頁貼給 AI，指定 AI 選擇。
你的指令可能長得像這樣： 使用 Google Fonts Icon 網頁：https://fonts.google.com/icons 替換於相應位置。
Noto Emoji
單色版：Google Fonts｜彩色版：Noto Color Emoji
支援完整，還支援字重可變的 Noto Emoji 可以用於許多地方。如果覺得單線條不夠有趣，也可以選擇彩色版本的 Noto Color Emoji。
AI 協作時的網頁字型用字提醒
在 AI 協作時，除了用心挑選字型，讓風格獨樹一格之外，也需要注意一些基本用字原則，讓版面更好看。以下，是幾個 justfont 在 AI 協作時，發現特別需要提醒 AI 夥伴的用字規範：
- 字重
建議確認使用的字型屬於單一字重、指定多字重、支援粗細的可變字型（Weight Veriable），並且將相關資訊告訴 AI，以免 AI 自作主張暴力加粗，精心挑選的字型反而糊掉不好讀。 - 行距
AI 目前仍以拉丁文字設計為主要參考，對漢字而言版面時常顯得過於擁擠，可以提醒 AI 加大行距，或者增加網頁元件之間的「上下 padding」。 - 對齊
就和前 AI 時代做排版一樣，不同的使用場景適合不同對齊方式。原則上，不論漢字、拉丁字母，指定「置左對齊」最為保險；短句、短段落可使用「置中對齊」；數字、表格選擇「置右對齊」；純漢字長段落可以使用「左右對齊」。 - 寫法
本篇介紹的三個網頁字型服務，都跨了許多語系，日文漢字、韓國標準、香港用法、中國國標等寫法都有收錄，使用時需要特別注意。除了看字型名稱是否標記 TC（繁體中文）、SC（簡體中文）、TW（台灣教育部寫法或者台灣常見寫法）、HK（香港常見寫法）、JP（日文漢字）、KR（韓國漢字）等，也可以檢查「骨、茶、躍、角、選」等字的寫法，來快速判斷。
