企业官网建设流程全解析

Screenshot Studio 是一款免费、开源的在线截图美化编辑器：无需注册、无水印，就能给截图叠加文字。本文带你实战它的文字叠加（Text Overlay）功能——添加文字、挑选 27+ 款 Google Fonts 字体、调节字重字号与阴影，快速做出专业的产品宣传图。

一、为什么用它给截图加文字 📝

普通截图工具只能“贴”一行死板的系统字体，而 Screenshot Studio 的文字层是一个完整的排版系统：

• 多层文字：可同时添加多条文字，独立编辑、隐藏或删除；
• 27+ Google Fonts：从 Inter、Poppins 到 Playfair Display、Pacifico，覆盖无衬线、衬线、手写、等宽四大风格；
• 精细控制：颜色、透明度、字号（8–150px）、横排/竖排、文字阴影一应俱全；
• 所见即所得导出：文字直接烧录进导出的 PNG，发给谁都能看。

二、三步给截图叠加文字

打开编辑器后，在左侧面板找到Text区块（源码见 TextSection.tsx），按下面三步操作：

1. 点击 “Add Text” 添加文字层

面板顶部的虚线按钮即可新增一条文字，点击后画布中央会出现可编辑的文字（逻辑在 text-overlay-controls.tsx#L51-L64）。

2. 输入内容与配色

• Content：直接在文本框里输入文字，选中时会自动聚焦，改字不用切换焦点；
• Color：提供白、黑、红、橙、黄、绿、蓝、紫 8 个快捷色，右侧小圆球是自定义取色器，支持任意 HEX 颜色。

3. 调整位置与样式

• Size滑块控制字号（8px–150px）；
• Position用百分比精确定位 X / Y，还有一键“水平居中 / 垂直居中”按钮；
• Opacity可把文字调成半透明水印效果；
• Orientation支持横向 / 竖排（vertical-rl）两种排版方向。

三、27+ Google Fonts 字体定制详解

字体下拉框里，每个选项都是用该字体本身渲染的，所见即所得。全部字体清单定义在 fonts.ts，并通过 app/layout.tsx 中的next/font/google预加载，保证导出的图片在任何设备上字形一致。

字体分类速览

字重选择小技巧

选中字体后，字重下拉框只会列出该字体实际加载的字重（由 getAvailableFontWeights 决定），例如 Bebas Neue 只有 Regular，而 Inter 提供 100–900 全字重。搭配口诀：

• 大标题 → Display 字体 + 800/900 字重，存在感拉满；
• 正文说明 → Inter / Poppins + 400/500，清晰易读；
• 点睛标语 → Caveat 手写体 + 品牌色，瞬间有温度。

四、进阶玩法：阴影让文字“浮”起来 ✨

深色背景上白色文字容易糊成一团，打开Shadow开关后：

• Blur（0–20px）：控制阴影模糊半径；
• X / Y Offset（±20px）：控制阴影方向，模拟光源自顶照射。

阴影参数最终由渲染层 text-overlay-renderer.tsx 转成 CSStext-shadow并烧录进导出图片。

五、源码导读与导出

想深入阅读文字层实现，可按这条路径走：

1. 交互面板：components/text-overlay/text-overlay-controls.tsx
2. 渲染层：components/canvas/html/HTMLTextOverlayLayer.tsx
3. 字体配置：lib/constants/fonts.ts
4. 整体架构：ARCHITECTURE.md

完成排版后点击导出，文字会与其他图层一起渲染为高清 PNG，支持批量 ZIP 导出，适合直接发布到官网、产品商店或社媒。

总结

• 用Add Text一键加字，多条文字层可独立管理；
• 用27+ Google Fonts覆盖从严肃商务到活泼手写的所有风格；
• 用透明度 + 阴影 + 竖排提升质感；
• 免费、无水印，导出即用——这就是 Screenshot Studio 给截图加文字的完整工作流。