图片加文字导出后变小、跑位或看不清：字号、坐标和描边怎么设

同一行字在网页预览里占了合适的宽度，下载后却缩成角落；拖到画面中央，换一张图又跑到边缘；白字在小预览里还能认，发到朋友圈后半行融进天空。三种现象看起来都像“字号没调好”，其实对应三套不同的计算。

真正要统一的不是某个像素值，而是预览、原图和批量图片使用的坐标系。下面先定位症状，再给出能复算的参数。

先按三种症状判断问题出在哪

图注：字号、坐标和描边分别对应三类失真。

• 导出后字变小：工具把预览里的固定像素字号直接画到了原图上。
• 换图后位置跑偏：文字位置记成了 x=600px 这类绝对坐标。
• 文字有一部分看不清：字色与底图局部颜色接近，或描边顺序、字体加载出了问题。

这三类问题要分别处理。单纯把字号拉大，可能暂时救回第一张图，却会让下一张小图上的文字超出画面。

把字号改成相对图片宽度的比例

先记住两个式子：

字号比例 = 预览字号 ÷ 预览宽度

导出字号 = 原图宽度 × 字号比例

例如，预览宽度是 900px，画面里 54px 的字看起来正合适，字号比例就是 54 ÷ 900 = 0.06，也就是图宽的 6%。导出到 4000px 宽的原图时，实际字号应为 4000 × 0.06 = 240px。

如果工具只记住“54px”，这行字在预览里占图宽 6%，在 4000px 原图里却只占 1.35%，视觉上会缩小约 4.4 倍。问题不在导出压缩，而在字号基准从一开始就错了。

图叮的图片加文字工具把字号保存为 sizeRatio，绘制时按 canvas.width × sizeRatio 重新计算。预览、原图导出和文字外框测量走同一套比例，避免三处各算一遍。

实际设置时，可以先从图宽的 6%～8% 试起，再按文案长度和用途调整。短标题可以更大，说明文字要更克制。这里的比例是起点，不是所有图片都必须套用的标准答案。

把位置改成相对宽高的坐标

位置也要做同样的换算：

相对横坐标 x = 文字锚点像素位置 ÷ 图片宽度

相对纵坐标 y = 文字锚点像素位置 ÷ 图片高度

假设文字锚点在一张 900×600 预览图的 (450, 492)，相对坐标就是 (0.5, 0.82)。换到约 4000×2667 的同画幅原图，锚点会落在约 (2000, 2187)，仍然处于水平中央、靠近下方的位置。

绝对坐标则不具备这种稳定性。同一个 x=600，放在 4000px 宽图片上靠左，放在 800px 宽图片上已经接近右边缘。

相对坐标也有边界：它能适配尺寸变化，不能自动解决画幅变化。1:1 方图、16:9 横图和 9:16 竖图里的主体位置通常不同。批量加字时，先按画幅和主体安全区分组，再给每组保存一套 x/y；不要拿同一个位置参数硬套所有图片。

文字的左对齐、居中和右对齐同样会影响锚点含义。靠右排版时，应让锚点远离右边缘；旋转文字时，还要给最长一行留出转动空间。最稳的验收办法，是先拿每组中“画面最窄、文案最长”的那张图试一次。

先描边再填充，并做两档检查

白字压在天空、白墙或高光上，黑字压在头发、阴影或深色商品上，都会丢失局部笔画。只看缩小预览容易漏掉，因为细小的明暗变化已经被压成几个像素。

Canvas 绘制时，正确顺序是先 strokeText，再 fillText。描边以文字路径为中心向内外展开；如果最后才画描边，向内的那一半会盖住字面，中文撇、捺和转角会显得发毛或被“啃掉”。

图叮默认给文字加深色描边，描边粗细按字号比例保存，初始值是 6%。这能让参数跟随字号一起缩放，但不代表 6% 对所有字体和底图都最好：

• 粗黑体配高对比底图，可以减小描边；
• 细笔画字体或明暗复杂的照片，可以保留描边，再少量加投影；
• 描边过粗时，先减描边，不要靠改小字号掩盖笔画变形。

完成后做两档检查：先以原图 100% 尺寸看笔画边缘，再缩到手机信息流大小看整体可读性。前者能发现描边毛刺和字体替换，后者能发现文字虽然清楚但整体太小。

字体为什么也会让导出结果不一样

Canvas 不会主动等待网络字体加载完成。页面先开始绘制、字体后到，浏览器可能静默换成替代字体，不报错；替代字体的字宽不同，换行、外框和位置都会跟着变。

纯前端工具更稳的做法是使用系统字体栈，例如苹方、微软雅黑、黑体或宋体的本机候选。这样可以避开“字体还没下载就导出”的时间差。不同操作系统的实际字形仍可能略有区别，因此需要跨设备像素完全一致的品牌字体时，应该回到能嵌入并等待字体加载完成的专业排版流程。

如果你的底图来自 AI 生图，中文本身已经乱码，字号和描边并不能把错字修对。应先保留干净留白，再按AI 图片中文字乱码的后期排版办法重新输入真实文案。

批量加字前，用这张清单收口

1. 字号保存为图宽比例，不保存预览像素。
2. 横向位置除以图宽，纵向位置除以图高。
3. 方图、横图、竖图分别保存位置参数。
4. 先描边、后填充，描边粗细跟随字号缩放。
5. 使用已就绪的字体，避免导出时静默替换。
6. 用最长文案和最窄画面做一次边界验收。
7. 同时检查原图 100% 和手机缩略图。

如果只是想把固定文案稳定地压到一张或一批图片上，可以直接打开图片加文字。图片在浏览器本地处理；最终处理和下载需要登录，登录后不限次数。

验收时再看一次结果：预览和导出中的文字占比一致，换同画幅图片后锚点不漂，浅色与深色区域上的笔画都能辨认，才算真正完成。