Question

有没有办法在HTML电子邮件中将字体保持为相似的大小？

在网站上看起来不错，但在我的电子邮件中，文字非常小而且非常靠近。

我在屏幕上显示了我在电子邮件中看到的内容。 enter image description here

有什么方法可以解决这个问题吗？

以下是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>

Answer 1

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

<table style="font-size:16px" width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0"></table>

Answer 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>

Answer 3

我发布了有效的代码。我在桌子上做了“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>

Answer 4

有！为了避免Gmail中图像之间的间距出现此问题（也发生在Hotmail中），您必须将display=block作为内嵌CSS样式放在图像中。就像那样：

img src="http://webserver.com/image.jpeg" alt="" style="display:block;"

css控制HTML EMAILS中的字体大小

4 个答案: