css 控制 HTML 电子邮件中的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14474938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css controling font size in HTML EMAILS
提问by Papa De Beau
Is there a way to keep fonts to a similar size in HTML EMAILS?
有没有办法让 HTML EMAILS 中的字体保持相似的大小？
On the Website it looks great but in my email the text is very small and close together.
在网站上它看起来很棒，但在我的电子邮件中，文本非常小且靠得很近。
I am including a screen shot of what I see in my email.
我包含了我在电子邮件中看到的内容的屏幕截图。
Any way to fix this?
有任何解决这个问题的方法吗？
Here is the html code:
这是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 "like" 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>
回答by sandeep
Always give inline stylingfor the emails. Emails not support external styling. Write like this:
始终为电子邮件提供 内联样式。电子邮件不支持外部样式。像这样写：
<table style="font-size:16px" width="843" height="855" border="0" align="center" cellpadding="0" cellspacing="0"></table>
回答by John
For email put all your font css inline in font tags, span tags or in the <td>containing your text.
对于电子邮件，将所有字体 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>
回答by Papa De Beau
I am posting the code that worked. I did the "INLINE STYLES" on the table but it didn't work so I put 'INLINE STYLES" on all the paragraphs. It looks good in my email client.
我正在发布有效的代码。我在桌子上做了“INLINE STYLES”，但没有用，所以我在所有段落上都加上了“INLINE STYLES”。它在我的电子邮件客户端中看起来不错。
Only ONE small issue and that is the image on the left, the left bar next to white space for text, is like one pixel off in gmail. Can't fix that bugger.
只有一个小问题，即左侧的图像，文本空白旁边的左侧栏，就像 gmail 中的一个像素。无法修复那个混蛋。
Ok here is the code that works
好的，这是有效的代码
<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 "like" 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>
回答by Juliana Padron
there!
To avoid this problem with spacing between images in Gmail (which occurs in Hotmail as well), you have to put display=blockas an inline CSS style in your images. Just like that:
那里！为了避免 Gmail 中图像之间的间距问题（Hotmail 中也会出现），您必须display=block在图像中放置 内联 CSS 样式。就像这样：
img src="http://webserver.com/image.jpeg" alt="" style="display:block;"
