HTML 电子邮件活动 - 在图像上分层文本？答案

【问题标题】：HTML Email Campaigns - Layering text over image?HTML 电子邮件活动 - 在图像上分层文本？
【发布时间】：2016-08-25 14:14:09
【问题描述】：

我有一个客户想要构建附件（我已经屏蔽了一些信息，所以它看起来不太好）。

基本上，他们希望将两个圆圈区域的“2016 年新品”和“11.59 英镑起*”作为文本。我知道 HTML 电子邮件的文本不能倾斜，但其他人是否可以看到任何其他问题，为什么这不适用于 HTML 电子邮件构建？

【问题讨论】：

在网站上为 SEO 和其他原因执行此操作可能是有意义的。但是为什么要在电子邮件中经历这种痛苦，其中很多事情可能会出现定位错误，背景图像无法加载等等？我只是把它放在图像中并收工。其他一切似乎都是在浪费时间和金钱。
您总是可以将该文本作为图像的一部分，精确定位一个漂亮的图形很难在电子邮件客户端中保持一致。只要大部分重要文本是实际文本，您就不会遇到任何垃圾邮件过滤器或重大问题。
@Pekka웃 他们想将此作为电子邮件活动发送。
@DBS 他们希望那些特定的部分是文本，他们希望根据客户进行更改。我不太关心垃圾邮件问题，我更关心的是设计问题。假设我们使文本变直了，您还能在那些圆圈中将其作为文本吗？还是会导致一大堆编码问题？
由于上述技术问题，这在电子邮件中是有问题的。您可以在服务器端生成带有正确文本的图像

标签： html email html-email

【解决方案1】：

它有许多图形元素，难以在电子邮件中表示。

正如您正确指出的那样，圆圈和有角度的文字是其中的两个。

另外，如果您要包含图片，大多数客户通常不会立即加载它们，而是需要用户确认，这样一开始看起来很丑陋（这是市场营销中经常出现的论点）。

第三，被设计为文本媒体，大多数 HTML 经常被包含（警告、意见追随）只是因为人们懒于考虑通常是更好的选择的好的文本电子邮件。

【讨论】：

感谢您的回复。圆圈会带来什么问题？因为如果我们把文字写直了，我们在那些圈子里获取文字也会有问题吗？
圆圈的问题是在纯HTML中，不可能添加圆圈。但是，您可以使用 CSS 来添加它们，David Walsh 对此有一个很好的 tutorial。但老实说，作为一个做 Web 开发的人，一想到内联 CSS，我就不寒而栗。
我建议使用圆形的方形图像并在其上添加文本。如果你有一个彩色的、移动的背景，这是行不通的，但是当它是平原时，它会起作用。我经常与印刷行业的客户合作，他们通常认为它是圆圈的图像和文本，以便正确显示。此外，大多数电子邮件接收器从 getgo 加载图像，几乎没有人阻止它们。嗯，这只是我的经验。
我同意，恕我直言，设计很差。这些圆形来自面向印刷的设计师，但这不是向客户传达信息的最佳方式。当前的趋势是精益、简约、扁平化设计。这种设计看起来来自前几代。这是我的拙见。
@revelt 您不知道电子邮件所针对的客户群。不是每个观众都喜欢精益/简约/扁平

【解决方案2】：

您可以在背景图像上叠加文本或前景图像。 backgrounds.cm 是执行此操作的最佳工具。这是一个例子：

<td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
    <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
    <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
    <v:textbox inset="0,0,0,0">
    <![endif]-->
        <div>
        <!-- Your content goes here -->
            <img src="">
            <br>
            Text Text Text
            <table> more layouts </table>
        </div>
    <!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
    <![endif]-->
</td>

您必须有创意才能实现上面链接的设计，但原则上您应该能够在大多数电子邮件客户端中实现这一点（或类似的东西）。

【讨论】：