图片中嵌入的文字无法随页面文本一起缩放
别名: 图内文字 · text in images · rasterized type
概念解释
海报式横幅把口号画进图里，页面字号怎么调，那行字都还是那几个像素。能跟着用户的文本缩放走的，只有真正的文本节点。图内文字（text in images）因此是一条独立的放大失败：周围段落已经变大，图上的标题、按钮文案、数据标注仍停在原尺寸，甚至在整页缩放里只是被放大成一块发糊的位图。
它不是「图需要替代文本」那件事——替代文本回答的是看不见图时读什么；这里回答的是看得见图、但字太小或太糊时，图上的字能不能跟正文一起变大。
机制
位图把字形烤进像素网格。仅文本缩放只改字体度量，网格不动，图内字完全无响应。页面缩放会把网格拉大，但拉大的是采样，不是矢量轮廓：小字在 200%、400% 下变成边缘发虚的色块，辨认所需的笔画分辨率回不来。SVG 内的 <text> 随视口变换可以保持清晰，若把字勾成路径或导出成 PNG，它就退回位图。
设计上图内字常承担标题、促销语、信息图标注、按钮外观。这些位置恰恰是低视力用户放大时最需要先读到的。正文已经按相对单位放大，视觉层级却在图上断掉：周围 18 像素的段落变得很大，横幅里 14 像素的口号仍是原图上的一小条。
怎么研究
清点页面上所有含字的图像（栅格、勾成路径的矢量、Canvas 绘制的标签），分别在仅文本缩放与页面缩放下观察这些字是否变大、是否保持清晰。
自变量：字是文本节点、SVG 文本，还是烤进像素；缩放类型与倍数。 因变量：图内字相对正文的尺寸比、模糊后的可认读率、用户是否放弃读图改去找别处的重复文案。
把「图上有字」和「字是否信息承载」分开编码。装饰性水印失败的代价低；把唯一价格、唯一截止日期画进图里，失败就是信息丢失。对照同一内容的 HTML 文本版本，看放大后哪一边还能读。
边界
照片里碰巧拍到的店招、截图里的界面字，无法也不应随本页字号重排；它们的通道是长描述或邻近说明，不是把照片当活字。公司标志里的字通常作为图形对象存在，缩放清晰度靠的是矢量资源，不要求它变成可重排的段落。地图和示意图上的标注若随整页字号无界放大，会互相重叠，需要独立的标注层级，而不是简单改成 HTML。邮件和某些内容平台会剥掉网页字体，作者把字画进图是为了保品牌——那是发布约束，不能当成用户侧已经可缩放。
怎么落地
- 标题、按钮文案、价格、截止日期、信息图关键标注用真文本（HTML 或 SVG 文本）排，不要把这些字烤进 PNG。
- 必须用位图时，在图旁用可见文本重复那句关键信息，让放大用户读旁边那句，而不是读糊掉的像素。
- 需要在图上保留外观的，优先 SVG 文本或足够大的源分辨率，并在仅文本缩放下检查图内字是否完全静止。
- 验证：只把浏览器默认字体加到约 200%，对比正文与每张含字图像。图上的字完全不动、或整页缩放后已糊到不可认，且邻近没有重复那句信息的，记为图内字失败。