Vibe Coding 使用外部字体

在 Vibe Coding 的世界里，除了追求功能的实现，更是整体氛围的营造，如果说色彩决定了网页的温度，那么“字体”就决定了网页的“语气”，一个好的字体能瞬间提升作质量感，让简单页面转变成专业设计感的应用！这篇教学会介绍网页的各种基础字体，以及学会如何快速引入外部资源和字体子集化的方法，让网页更上一层楼。

更多参考：Vibe Coding 全方位开发导读

快速导览：

• 认识常用的字体类型 ( 通用字型 )
  • serif ( 衬线字型 ) 与 sans-serif ( 无衬线字型 )
  • monospace ( 等宽字型 )
  • cursive ( 手写字型 )
  • fantasy ( 奇幻字型 )
• 跨平台显示的秘诀：整合多组字型
• 使用外部字体 ( Google Fonts )
• 使用外部字体 ( 自定义字体链接 )
• 使用外部字体 ( 字体子集化 )
• 使用外部字体注意事项

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识常用的字体类型 ( 通用字型 )

在选择字体前，要先理解常见的几种字体分类，透过指定的字体类型指令，AI 才能更精确产生理想的风格。而通用字型 ( generic-family ) 泛指是“操作系统的默认字型”或“浏览器的默认字型”，只要使用对应的关键字就能套用对应字型，CSS 支援的通用字型有五种名称：

如果使用下面的提示词， 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/

选择的字型后 ( 范例挑选 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 格式。

转换字体：https://cloudconvert.com/ttf-to-woff2

转换字体后，参考“使用 GitHub 部署你的网页作品”教学，将这个字体上传到 Github，并产生公开链接。

有了字体公开链接后，只需要把字体的名称和链接提供给 AI，就可以产生套用的字体 ( 范例链接有可能会删除，请使用自己的公开链接 )。

請用一個簡單的網頁呈現 h1~h6 六個標題，標題內容都是「Hello World!! I am OXXO!!」，字體設定如下：
- 字體名稱：oxxotest
- 字體連結：https://oxxostudio-demo.github.io/share-fonts/test.woff2

使用外部字体 ( 字体子集化 )

由于中文、日文或韩文字体动辄包含数万个汉字，字型文件的大小通常介于 10MB 到 30MB 之间，如果直接将文字文件放到网页中，会严重拖慢加载速度，导致用户看到长时间的空白或系统默认字体。而“字体子集化”( Font Subsetting ) 可以从原始字体文件中，提取“只会实际会用到”的特定字元，并重新打包成一个体积极小的精简版字档。

字体子集化的技术常应用于活动网站、主题页面、线上广告等字体量需求不多的网页，可以在确保加载速度的情况下，又能使用别具风格特色的字体。

下方列出字体子集化的优缺点：

优点：

• 极致的文件瘦身

  将数万字的字型缩减为仅含数百个常用字或特定标题字，文件大小可从数十 MB 降至几十 KB 或几百 KB，缩减率高达 90% 以上。

• 显著提升加载速度

  较小的文件意味着更短的下载时间，能有效改善网页的 LCP 指标 ( 最大内容绘制 )，提升用户体验。

• 保有设计一致性

  设计师可以自由使用高质量的特殊字体，而不必担心性能问题，确保品牌视觉在各平台上的一致性。

缺点：

• 缺乏动态弹性

  子集化是静态的。如果网页内容是由用户产生的（如留言板），或者未来新增了子集清单外的新字元，那些字元将无法正常显示，会跳回系统默认字体。

• 维护成本增加

  每当网页文案更新且出现了新字元时，开发者必须重新执行子集化程序并更换字型文件。

• 字体授权限制

  部分商业字体在授权条款中禁止修改原始文件或进行再分发，在执行子集化前需确认是否合乎授权规定。

如果要制作自己的字体子集化，可以使用 Google Colab 搭配下方程序，就能快速提取部分文字，建立子集化的字体，首先打开 Google Colab，从左上角“文件 > 在云端硬盘中建立新笔记本”就能建立一份新的 Colab 笔记本，如果已经会使用 Colab，也可以自行在 Google 云端硬盘中建立 Colab 笔记本。

前往 Colab：https://colab.research.google.com/

打开 Colab 新笔记本之后，当左上方已经连线 ( 出现绿色打勾符号 )，就可以从左侧打开暂存文件夹，并且点击“上传文件”的按钮，上传原始字体 ( 上传时会出现警告消息，提示 Colab 离线关闭后这个文件会被删除，这是正常状况 )。

复制贴上下方程序码，加上自己的字体名称，并填入自己想要转换的文字，点击前方执行按钮，执行后就会建立这些文字的字体子集，点击字体后方的“...”就可以下载。

!pyftsubset 字體名稱.ttf --text="你的文字放這邊" --flavor=woff2

下载字体后，就可以将字体上传到自己的网页空间 ( 参考 Vibe Coding 实战：使用 GitHub 部署你的网页作品 )，就可以在 Vibe Coding 中使用这些字体啰！下方范例会让 AI 用一段文字，套用指定的字体子集，就只会有特定文字呈现特定字体 ( 观察 “STEAM 教育学习网”这几个字的字明显不同 )。

請幫我產生一個簡單的網頁，裡面呈現一段話：「我最喜歡 STEAM 教育學習網裡面的教學啦」。
將這段文字使用 https://oxxostudio-demo.github.io/web-test/test.woff2 字體。

使用外部字体注意事项

只要使用外部资源，就一定会有加载的时间或一些限制，下方列出一些注意事项：

• 字体没有显示

  • 检查路径：GitHub 的文件路径区分大小写。
  • 检查跨域问题：如果不是使用 GitHub Pages 网址，浏览器可能会因为安全性问题封锁字体。
  • 等待更新：由于浏览器快取，可能需要重新整理几次才能看到变化。

• 中文字体加载太慢

  • 使用默认字体：中文字字体文件通常都很大，建议使用系统字体。
  • 只使用特定字元：如果真的有需求，可以使用工具只截取标题会用到的字元 ( 上方内容所介绍的字体子集化 Font Subsetting )，将 10MB 的文件缩小至 100KB。

• 使用替代字体

  提供 AI 替代字体的提示，例如：“在設定自定義字體時，請務必在 @font-face 中加入 font-display: swap;。同時，請設定一組與目標字體風格（ 如襯線或無襯線 ）接近的字體”

小结

字体是网页设计的灵魂，它能直接传达出产品的“个性”，在 Vibe Coding 的过程中，善用 Google Fonts 并搭配之前学过的 Vibe Coding 知识，就能在最短时间内打造出专业级的作品。

延伸阅读

Vibe Coding 的重点都不在于“写程序”，而是为了配合程序的各种“准备工作”，下方列出 Vibe Coding 相关的教学，透过一系列的教学，就更能掌握正确且顺畅的开发流程:

• 认识 Vibe Coding：程序不再是拼逻辑，而是拼“感觉”
• Vibe Coding 新手入门：从蓝图规划到 AI 开发的思维转型
• Vibe Coding 重要的准备工作：架构流程图
• Vibe Coding 网页必备知识：开发者的“沟通工具箱”
• Vibe Coding Python 必备知识：AI 与 Colab 打开程序直觉
• Vibe Coding 固定网页样式：解决样式不一致的恼人问题
• Vibe Coding 图片处理心法：从云端空间到 Base64 的完美配置
• Vibe Coding 玩家必备的 SVG 进阶操作指南
• Vibe Coding 字体指南：用文字风格定义网页灵魂
• 下载 Vibe Coding 网页程序码，掌握程序码的主导权
• Vibe Coding 实战：利用 Google Apps Script 打造免费网页部署基地
• Vibe Coding 实战：使用 GitHub 部署你的网页作品
• AI 时代的轻量级后端：当 Vibe Coding 遇上 Google Sheets
• 从灵感到即时同步：Vibe Coding 遇上 Firebase Realtime Database
• 数字灵魂的存放处：Vibe Coding 串接 Firebase Firestore
• 拒绝数据裸奔！Vibe Coding 必备 Firebase App Check 安全防护指南
• Vibe Coding + Firebase Authentication 打造顺畅的注册登录体验
• Vibe Coding 将 Google Drive 变身最强文件后端
• 灵感即程序：用 Gemini API 打开你的 Vibe Coding 新时代
• Vibe Coding 极速打造 LINE Bot 智能机器人
• Vibe Coding 实战：免写程序！把 Google 试算表变成超精美点餐系统
• Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
• Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
• Vibe Coding 实战：打造自己的英文单字卡！

意见反馈