90%的人搞反了：想让糖心官网vlog更干净？字幕这项设置一定要改
很多人做vlog时把字幕“直接烧进视频里”（也就是嵌入或渲染到画面），结果画面显得杂乱：文字遮挡画面重要内容、配色跟画面冲突、不同设备上字体大小不一致，尤其在移动端看起来格外拥挤。要让糖心官网上的vlog看起来更干净、专业，只需要改一个设置：把“嵌入式字幕”改成“可切换的外部字幕（Closed captions / WebVTT / SRT）并用样式控制它”。
为啥这么管用？
- 用户可以开/关字幕，不会永远挡住画面。
- 浏览器/播放器允许用 CSS 或 cue 设置控制字体、颜色、位置、透明度，从而实现统一且不抢镜的视觉风格。
- 外部字幕文件用文本格式（UTF-8）更利于修正、翻译和搜索引擎收录（提升 SEO）。
具体怎么做（实操指南） 1) 先不要把字幕烧进视频文件里。导出纯视频，不包含字幕轨。 2) 准备外部字幕文件，推荐 WebVTT（.vtt）或 SRT（.srt），并确保保存为 UTF-8 编码，避免中文乱码。 简单 WebVTT 示例： WEBVTT
00:00:00.000 --> 00:00:03.000 align:middle line:85% position:50% size:80% 欢迎来到糖心官网，这里是本期vlog的开场。
00:00:03.200 --> 00:00:06.000 今天带你看…… 3) 在网页上使用 HTML5 播放器并加载字幕轨（如果你用的是自托管页面或能插入 HTML）：
4) 用 CSS 自定义样式（浏览器支持 ::cue）来让字幕更干净、不抢画面。示例样式： video::cue { background: rgba(0,0,0,0.6); color: #ffffff; font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 3.2vh; /* 用视窗高度单位，跨设备更稳定 / text-shadow: 0 1px 2px rgba(0,0,0,0.6); padding: 0.12em 0.3em; border-radius: 4px; line-height: 1.2; } video::cue(b) { font-weight:600; } / 可针对特定标签调整 */
5) 控制行数与长度：把每行控制在 28–35 字以内，字幕行数不超过两行。WebVTT 的 cue 设置（line / position / size / align）可以精准定位字幕，避免挡住下方图形或按钮。例如把 line 设置为 85% 或更高一点，确保不遮住播放器控制条。 6) 如果你在 Google Sites 上发布：Sites 本身对自定义 CSS 支持有限，建议两条可选路线：
- 将视频放在支持自定义字幕与样式的第三方平台（如自托管页面、Vimeo、或用 Video.js / Plyr 嵌入的页面），再把该页面嵌入 Sites（用 iframe）。
- 使用 YouTube：上传视频并附上 .srt/.vtt 字幕，观众可开关，但 YouTube 的默认样式不可完全自定义，想要严格风格一致建议用可自定义的播放器嵌入。 7) 别再完全依赖自动生成字幕：自动字幕快但常有错别字、错位和逻辑断句问题。对外发布的内容最好人工校对一次，尤其是专有名词和品牌名。
快速检查清单（发布前）
- 字幕是外部轨道并可开关？（不是烧录）
- 字幕文件为 UTF-8？中文无乱码？
- 每行长度 & 行数合适？（≤35字/行，≤2行）
- 字体大小用相对单位（vh/vw/rem），手机可读？
- 背景透明度与文字对比度合适（推荐背景黑 50–70% + 白字）？
- 在桌面、手机、竖屏、横屏都测试过？
