Voyager 聊天字号调节（Chat Font Size）指南：80%–150% 灵活缩放 Gemini 聊天区字体
【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude & ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件；其中的提示词管理器可用于任意网站，如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager
本文以 Voyager 扩展的**聊天字号调节（Chat Font Size）**功能为焦点，介绍如何在 Gemini 聊天区按 80%–150% 的比例自由缩放字体，以获得更舒适的阅读体验。读完本文，你将掌握该功能的完整配置参数、滑块操作方式、底层 CSS 注入机制与存储键语义，并能依据仓库源码和测试用例自行验证其行为。
该功能于 Voyager 1.3.8 版本引入，默认关闭（off by default），需在弹窗（popup）中手动开启。
功能简介
不同用户对聊天字号有截然不同的偏好：有人喜欢紧凑的正文以提升信息密度，也有人倾向更大的字号来缓解视觉疲劳。Voyager 的聊天字号调节功能允许你把 Gemini 聊天区的字号在80% 到 150%之间自由调整。
- 灵活的范围：支持 80%–150% 的字号调节，覆盖绝大多数阅读需求；
- 完整覆盖：同时作用于用户消息与模型回复，涵盖正文文本、列表、表格与代码块；
- 代码块优化：代码块字号会按比例自动缩小（正文字号 × 0.875），在代码与普通文本之间保持视觉层级；
- 即时生效：改动无需刷新页面即可实时预览。
开启方式与操作步骤
- 点击浏览器工具栏中的 Voyager 图标，打开设置面板（popup）；
- 在布局设置中找到Tamaño de fuente del chat（聊天字号）条目，开启开关（默认关闭）；
- 拖动滑块调整字号百分比——页面会实时预览变更效果。
弹窗中该滑块的最小值为80、最大值为150、步长为5，即允许选择的百分比为 80%、85%、90%、…、150%，两端分别标注 "Pequeño（小）" 与 "Grande（大）" 文案。相关 UI 实现见 PopupLayoutSettings.tsx，滑块文案在 西班牙语语言包 中定义（chatFontSize/chatFontSizeSmall/chatFontSizeLarge）。
核心参数一览
| 参数 | 取值 / 默认值 | 说明 |
|---|---|---|
| 字号范围（min/max） | 80% – 150% | 支持调节的字号百分比区间 |
| 滑块步长（step） | 5 | 每次拖动的最小增量，见 layoutSettings.ts |
| 默认字号 | 100% | 未设置或设置非法时的回退值 |
| 代码块系数 | × 0.875 | 代码块字号 = 正文字号 × 0.875，见 chatFontSize/index.ts |
| 行高（正文） | 1.6 | 注入样式中正文行高 |
| 行高（代码块） | 1.5 | 注入样式中代码块行高 |
| 功能开关默认值 | 关闭（off） | 需要用户在 popup 中手动开启 |
配置常量集中在 layoutSettings.ts 中：CHAT_FONT_SIZE = { min: 80, max: 150, defaultValue: 100 }。存储键则定义在内容脚本 chatFontSize/index.ts 中：
gvChatFontSizeEnabled：功能开关（布尔值）；gvChatFontSize：当前字号百分比（数值，如120表示 120%）。
底层实现原理
动态注入<style>样式
内容脚本入口startChatFontSizeAdjuster位于 chatFontSize/index.ts，并已在 内容页面入口 中被调用。它的核心机制是：读取存储中的开关与百分比后，向document.head注入（或更新）一个id为gemini-voyager-chat-font-size的<style>元素，将所有相关选择器的font-size设置为${percent}%并附带!important优先级，从而覆盖 Gemini 页面自身内联设置的字号。
CSS 选择器按消息类型分层覆盖：
- 用户消息内部文本元素：
.query-text、.query-text-line、user-query-content .gds-body-l、[data-message-author-role="user"] .gds-body-l等（Gemini 会直接在这类元素上设置font-size）； - 模型回复内部文本元素：
message-content、.response-content、model-response .markdown、[data-message-author-role="assistant"] .markdown等； - Markdown 块级元素：
p、li、td、th，防止 Gemini 主题对这些元素单独设置字号导致不统一； - 代码块：
code、pre、.code-container、.formatted-code-block-internal-container code等，字号统一为calc(${percent}% * 0.875)，比正文略小以保持层级。
正文行高固定为1.6，代码块行高为1.5，避免放大字号后行距过挤。
越界钳制（Clamp）与数据归一化
为避免存储中被写入非法值，实现中提供了两层防护：
clampPercent先把值四舍五入，再夹取到[80, 150]区间（chatFontSize/index.ts）；normalizePercent对非有限数值（如NaN/Infinity）回退到默认值100（chatFontSize/index.ts）。
在初始化读取存储时，若发现存储值与归一化结果不一致（例如旧版本写入的200），还会回写归一化后的值到chrome.storage.sync，实现自我修复（chatFontSize/index.ts）。
实时同步：存储监听与即时生效
"即时生效、无需刷新"依赖于chrome.storage.onChanged监听器：当弹窗侧写入gvChatFontSizeEnabled或gvChatFontSize时，内容脚本立即更新或移除注入的样式（chatFontSize/index.ts）。关闭开关时调用removeStyles()移除<style>节点，字号恢复原样；页面卸载（beforeunload）时也会清理监听器与样式，避免内存泄漏。
弹窗侧的防抖写入
弹窗侧通过useWidthAdjuster（useWidthAdjuster.ts）管理滑块状态：拖动过程中只更新本地width状态，用户松手（onValueCommit）时才把最终值写入存储；组件卸载时若有未提交的拖动值也会补写一次。这样既保证了实时预览，又避免拖动过程中频繁触发存储写入。
测试验证
仓库在 chatFontSize.test.ts 中为该项功能提供了完整的单元测试，可作为行为契约：
- 开启时注入样式：存储中
enabled: true、值为120时，注入样式中应包含font-size: 120% !important； - 关闭时不注入：
enabled: false时不应注入任何样式； - 存储变更实时更新：将值从 120 改为 140 后，样式文本更新为
font-size: 140% !important； - 关闭开关移除样式：
enabled从 true 变为 false 后，<style>节点被移除； - 越界钳制：写入 200 时被钳制为最大 150；
- 选择器覆盖：断言样式文本同时包含用户消息选择器（
.query-text、.gds-body-l）与模型回复选择器（message-content、.markdown-main-panel）以及块级元素（model-response p、message-content li）。
与其他布局调节项的关系
聊天字号调节属于弹窗"布局设置（Layout Settings）"系列的一部分，与聊天宽度（Chat Width，30%–100%）、行距（Chat Spacing，120%–220%，并附带段落间距 0–24px）等共用同一套滑块组件与存储机制（layoutSettings.ts）。它们共享useWidthAdjuster的防抖写入逻辑，且在 popupSettingsSearchIndex.ts 中注册了搜索索引（chatFontSize/chatFontSizeSmall/chatFontSizeLarge），方便用户在弹窗搜索框中直接定位该设置。
注意事项
- 该功能默认关闭，请先在 popup 中打开开关；
- 字号百分比仅作用于 Gemini 聊天消息区域的文本，不影响扩展自身 UI；
- 存储值异常时会被自动归一化到 80%–150% 区间，超出范围的值（如 200）会被钳制为 150；
- 该功能面向 Gemini 聊天界面，若 Gemini 前端 DOM 结构发生大版本重构导致选择器失效，需要同步更新 chatFontSize/index.ts 中的选择器列表。
【免费下载链接】voyagerEnhancement suite for Gemini, AI Studio, Claude & ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件；其中的提示词管理器可用于任意网站，如 DeepSeek Harness。项目地址: https://gitcode.com/gh_mirrors/ge/voyager
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
