9

有没有办法让 HTML EMAILS 中的字体保持相似的大小?

在网站上它看起来很棒,但在我的电子邮件中,文本非常小而且靠得很近。

现场演示

我附上了我在电子邮件中看到的屏幕截图。在此处输入图像描述

有任何解决这个问题的方法吗?

这是html代码:

<html>
<head>
<title>The Most Holy Rosary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#Table_01 tr td #box {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 16px;
    line-height: 24px;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Holy Mary Email copy.psd) -->
<table width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_01.png" width="546" height="253" alt=""></td>
        <td width="297" rowspan="3" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_02.png" width="297" height="855" alt=""></td>
    </tr>
    <tr>
        <td width="11" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_03.png" width="11" height="565" alt=""></td>
        <td width="535" valign="top"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="15" id="box">
          <tr>
            <td valign="top"><p style="font-weight: bold; color: #666;">PRAISE BE JESUS CHRIST!</p>
            <p><br>
              Thank you for taking the time to read this email. We are developing some exciting media to help you and others fall even more in love with JESUS through the power of Mary, the Queen of Heaven (Revelations 12) and through Heaven's blessed gift to us... The Most Holy Rosary. </p>
            <p>We need your help if you can. We need you to answer some quick questions on the Rosary. Also once on the page can you &quot;like&quot; it on Facebook, Tweet it and finally forward this email to friends who may be interested. Awesome! Thank you so much.</p>
            <p align="center"><a href="http://www.EdVizenor.com/?p=questions"><img src="http://www.EdVizenor.com/rosary/email/images/HolyRosary.png" width="364" height="67"></a></p>
            <p>Be assured of my prayers for you and all your intentions in my Rosary.</p>
            <p>In The Merciful Heart Of Jesus Christ,<br>
            <span style="color: #666">Ed Vizenor </span></p></td>
          </tr>
      </table></td>
    </tr>
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_05.png" width="546" height="37" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
4

4 回答 4

19

始终为电子邮件提供 内联样式。电子邮件不支持外部样式。像这样写:

<table style="font-size:16px" width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0"></table>
于 2013-01-23T08:08:12.783 回答
2

对于电子邮件,将所有字体 css 内联在字体标签、跨度标签或<td>包含您的文本中。

<font style="color:#770000;">This will always work</font>


<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td style="color:#770000;">
      So will this.  
    </td>
  </tr>
</table>
于 2013-01-23T19:28:45.610 回答
2

我正在发布有效的代码。我在桌子上做了“INLINE STYLES”,但没有用,所以我把“INLINE STYLES”放在所有段落上。在我的电子邮件客户端中看起来不错。

只有一个小问题,那就是左边的图像,左边的文本空白旁边的栏,就像 gmail 中的一个像素。修不了那个混蛋。

好的,这是有效的代码

<html>
<head>
<title>Holy Mary Email copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Holy Mary Email copy.psd) -->
<table width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_01.png" width="546" height="253" alt=""></td>
        <td width="297" rowspan="3" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_02.png" width="297" height="855" alt=""></td>
    </tr>
    <tr>
        <td width="11" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_03.png" width="11" height="565" alt=""></td>
        <td width="535" valign="top"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" id="box">
          <tr>
            <td valign="top"><p style="font-family: Tahoma, Geneva, sans-serif; font-weight: bold; color: #666; font-size: 17px">PRAISE BE JESUS CHRIST!</p>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">Thank you for taking the time to read this email. We are developing some exciting media to help you and others fall even more in love with JESUS through the power of Mary, the Queen of Heaven (Revelations 12) and through Heaven's blessed gift to us... The Most Holy Rosary. <br>
                <br>
                </span><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">We need your help if you can. We need you to answer some quick questions on the Rosary. Also once on the page can you &quot;like&quot; it on Facebook, Tweet it and finally forward this email to friends who may be interested? Awesome! Thank you so much.</span></p>
              <span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">
                <p align="center"><a href="http://www.EdVizenor.com/?p=questions"><img src="http://www.EdVizenor.com/rosary/email/images/HolyRosary.png" alt="" width="364" height="67"></a></p>
              </span>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">Be assured of my prayers for you and all your intentions in my Rosary.</span></p>
              <p><span style="font-family: Verdana, Geneva, sans-serif; font-size: 17px">In The Merciful Heart Of Jesus Christ,</span><br>
                <span style="color: #666">Ed Vizenor </span> </td>
          </tr>
        </table></td>
    </tr>
    <tr>
        <td colspan="2" valign="top">
            <img src="http://www.EdVizenor.com/rosary/email/images/HailMary_05.png" width="546" height="37" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
于 2013-01-23T20:02:10.940 回答
1

那里!为了避免 Gmail 中的图像间距问题(Hotmail 中也会出现这种情况),您必须 display=block在图像中添加内联 CSS 样式。就像这样:

img src="http://webserver.com/image.jpeg" alt="" style="display:block;"
于 2013-01-24T13:37:50.820 回答