文字图像

要求内容

当相同的视觉呈现可通过真实文字加 CSS 实现时，请使用真实文字。文字图像无法干净缩放，无法被选中，无法由浏览器翻译，无法被用户 CSS 重新设置样式，且在高倍缩放时会出现像素化。例外情形包括：徽标、不可或缺的图像（展示界面外观的截图），以及用户可自定义的文字图像。

如何满足要求

• 使用 Web 字体通过 HTML 文字渲染标题、横幅和推广文案，而非导出为 PNG。
• 对于营销标签（“新品”、“特卖”、“七折优惠”），使用 CSS 样式化的 <span> 替代雪碧图。
• 若设计师提供了含有嵌入文字的主图，请要求将文字作为独立图层，通过 CSS 叠加在图片上方渲染。
• 对于服务端生成的社交媒体式引言卡片，尽可能使用带有 <text> 元素的 SVG 渲染——SVG 文字缩放清晰且可被选中。
• 使用 @font-face 加载自定义展示字体，而非将装饰性字体栅格化为图片。

常见失败情形

• 横幅广告将所有文案（“限时特惠！立即购买！“）渲染为 JPEG，在 200% 缩放时模糊不清。
• 定价套餐卡片中，“$99/月”是卡片图像的一部分，而非 HTML 文字。
• 区块分隔处使用了样式化文字（“我们的服务”）的 PNG 图片，而非样式化的 <h2>。
• 行动号召完全基于图像，替代文字仅重复视觉文案内容。
• 营销页面中使用电子邮件式截图，而营销文案本可以是真实文字。

重要性

文字图像同时也是翻译和 SEO 的失败——Google 无法索引它们，Chrome 无法翻译它们，屏幕放大镜用户看到的是像素化图像。修复方式通常非常简单：将导出图片替换为 HTML。阻力通常来自工作流程——设计师交付 JPEG 是因为在 Figma 中比编写规格说明更快。