2013-01-23 216 views
2

有沒有辦法讓字體在HTML電子郵件類似的大小?CSS controling字體大小在HTML電子郵件中

在網站上看起來不錯,但在我的電子郵件文本是非常小的,併攏。

Live Demo

我包括我在我的電子郵件看到一個屏幕截圖。 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> 
+0

如果文本位於'​​'標籤內,某些郵件客戶端將更改字體。所以,你需要重複此爲每個表格單元格的:' ...' 。希望能幫助有人在這裏登陸。 – Ricketts

回答

14

總是給聯樣式的電子郵件。電子郵件不支持外部樣式。像這樣寫:

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

我發現[Premailer](https://github.com/alexdunae/premailer)庫可以非常方便地執行此操作。 – RecursivelyIronic

+0

好吧,我把它放在一個包含主文本的表格中。仍然沒有工作:<表寬度= 「95%」 BORDER = 「0」 ALIGN = 「中心」 CELLPADDING = 「0」 CELLSPACING = 「15」 ID = 「箱」 樣式=「行高:25像素;字體 - family:宋體,日內瓦,無襯線; FONT-SIZE:16px的「> –

+0

此代碼將工作可能有別的東西上創造的問題。爲了好的做法,檢查你的Gmail中的一些電子郵件代碼等。 – sandeep

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

我張貼的是工作的代碼。我在桌面上做了​​「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> 
1

有代碼! 要爲了避免這個問題,在Gmail中的圖像間隔也是這樣(Hotmail也出現這種情況),您必須將display=block作爲內聯CSS樣式放入圖像中。即:

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