編碼HTML：字體大小在Apple Mail比微軟Outlook始終較大

我一直在關注各種指南在線諸如運動監視器的那些建立一個HTML頁面用於查看電子郵件客戶端。對於那些不熟悉的人來說，這基本上意味着將頁面從HTML表格和內聯CSS中構建出來，以創建普通網頁的外觀和格式。這種不同的編碼行爲是由於大多數電子郵件客戶端限制大量CSS樣式規則。對於測試，我一直使用Email on Acid來預覽我的頁面如何在各種電子郵件客戶端上呈現。編碼HTML：字體大小在Apple Mail比微軟Outlook始終較大

我遇到的問題是在Microsoft Outlook的文本看起來比真正的字體大小（如在Chrome，Firefox或Safari瀏覽），並且在蘋果的郵件文本顯示比真正的字體大小小。由於我希望在兩個平臺上都能看到我的頁面，所以我需要找到解決此問題的補救措施。

Here是示出如何每個平臺進行比較的圖像。請注意Apple Mail上的文本如此之大，以至於打破了表格的高度。毫不奇怪，簡單地縮小Apple Mail的文本大小並不是一種選擇，因爲它會將Outlook中的文本縮小爲遺忘。

如果您熟悉編碼就可以知道，這是一個混亂的商業電子郵件，並要求你打破常識的做法了大量的編碼 - 包括可讀性。爲了幫助細讀源代碼，here是一張清晰標記每個表格開始和結束位置的圖像（在Chrome中查看）。在下面的源代碼中，所有名爲「row_xx.jpg」的圖片都只是構成電子郵件邊框的垂直灰色位。這些圖像中的一些還在裏面有一些空白區域，以便給出縮進的幻覺。

來源：

<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="600" height="8"> 
      <img style="display:block;border:none;" src='images/row_11.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="10"> 
      <img style="display:block;border:none;" src='images/row_12a.jpg' /> 
     </td> 
     <td width="554" height="10" style="font-family:Lucida Grande;font-size: 7px;"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </td> 
     <td width="2" height="10"> 
      <img style="display:block;border:none;" src='images/row_12c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="12"> 
      <img style="display:block;border:none;" src='images/row_13a.jpg' /> 
     </td> 
     <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </td> 
     <td width="2" height="12"> 
      <img style="display:block;border:none;" src='images/row_13c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="12"> 
      <img style="display:block;border:none;" src='images/row_14a.jpg' /> 
     </td> 
     <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;"> 
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </td> 
     <td width="2" height="12"> 
      <img style="display:block;border:none;" src='images/row_14c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="600" height="8"> 
      <img style="display:block;border:none;" src='images/row_15.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="10"> 
      <img style="display:block;border:none;" src='images/row_16a.jpg' /> 
     </td> 
     <td width="554" height="10" style="font-family:Lucida Grande;font-size: 7px;"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </td> 
     <td width="2" height="10"> 
      <img style="display:block;border:none;" src='images/row_16c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="14"> 
      <img style="display:block;border:none;" src='images/row_17a.jpg' /> 
     </td> 
     <td width="554" height="14" style="font-family:Lucida Grande;font-size: 7px;"> 
      uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
     </td> 
     <td width="2" height="14"> 
      <img style="display:block;border:none;" src='images/row_17c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="600" height="11"> 
      <img style="display:block;border:none;" src='images/row_18.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="13"> 
      <img style="display:block;border:none;" src='images/row_19a.jpg' /> 
     </td> 
     <td width="554" height="13" style="font-family:Lucida Grande;font-size: 7px;"> 
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </td> 
     <td width="2" height="13"> 
      <img style="display:block;border:none;" src='images/row_19c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="12"> 
      <img style="display:block;border:none;" src='images/row_20a.jpg' /> 
     </td> 
     <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;"> 
      =Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. 
     </td> 
     <td width="2" height="12"> 
      <img style="display:block;border:none;" src='images/row_20c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="600" height="12"> 
      <img style="display:block;border:none;" src='images/row_21.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="12"> 
      <img style="display:block;border:none;" src='images/row_22a.jpg' /> 
     </td> 
     <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;"> 
      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
     </td> 
     <td width="2" height="12"> 
      <img style="display:block;border:none;" src='images/row_22c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="12"> 
      <img style="display:block;border:none;" src='images/row_23a.jpg' /> 
     </td> 
     <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;"> 
      quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, 
     </td> 
     <td width="2" height="12"> 
      <img style="display:block;border:none;" src='images/row_23c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="11"> 
      <img style="display:block;border:none;" src='images/row_24a.jpg' /> 
     </td> 
     <td width="554" height="11" style="font-family:Lucida Grande;font-size: 7px;"> 
      similique sunt in culpa qui officia deserunt mollitia animi, 
     </td> 
     <td width="2" height="11"> 
      <img style="display:block;border:none;" src='images/row_24c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="12"> 
      <img style="display:block;border:none;" src='images/row_25a.jpg' /> 
     </td> 
     <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;"> 
      id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
     </td> 
     <td width="2" height="12"> 
      <img style="display:block;border:none;" src='images/row_25c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="44" height="12"> 
      <img style="display:block;border:none;" src='images/row_26a.jpg' /> 
     </td> 
     <td width="554" height="12" style="font-family:Lucida Grande;font-size: 7px;"> 
      Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, 
     </td> 
     <td width="2" height="12"> 
      <img style="display:block;border:none;" src='images/row_26c.jpg' /> 
     </td> 
    </tr> 
</table> 
<table cellspacing=0 cellpadding=0 border=0> 
    <tr width="600"> 
     <td width="600" height="24"> 
      <img style="display:block;border:none;" src='images/row_27.jpg' /> 
     </td> 
    </tr> 
</table>

來源

2014-04-11 user3494572

文字出現在iOS設備更大的似乎是一個常見的問題，但我還沒有聽說過它在Apple Mail中發生的事情。也許iOS設備的修補程序也適用於您。只需將其包含在您不希望調整大小的文本樣式中即可。如果您不想調整任何文本的大小，請將其包含在body標籤的樣式中。

-webkit-text-size-adjust:none;

來源

2014-04-11 15:32:14 Narong

這個屬性似乎並不影響渲染中的文本，由於約翰的解決方案的結果表明將-webkit-text-size-setting設置爲100％或不返回相同的結果。關於我的頭頂，我覺得這表明這個屬性只會影響移動設置中的文本，但我需要對屬性本身做更多的研究。 – user3494572

看起來我很快就說話了。當我使用這種樣式時，肯定會發生一些事情，我相信我錯過了它，因爲它仍然不完全符合Chrome中的文本大小;無論如何，它確實在Apple Mail中減少了相當大的字體。直到我開始搞亂其他想法並將其禁用時，我才意識到這一點。我目前的工作流程涉及渲染之間的長時間等待，雖然很容易看到結果與Chrome的風格不匹配，但如果它與舊渲染相比有顯着區別，它完全會超出我的頭腦。謝謝你的提示！ – user3494572

@ user3494572 Webkit前綴只會影響Mac客戶端，因爲它們是使用Webkit引擎呈現電子郵件的那些客戶端。 Thunderbird使用的Gecko也可能觸發，因爲它是相似的。 – John

你有這是你<style>標籤？

body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */

顯然只有文本大小的東西在這種情況下是相關的。

如果不解決這個問題，那麼就沒有多少人可以做，除非你想開始嘗試使用技巧的組合，不同的客戶根據他們不同的支持，目標客戶羣爲目標。

來源

2014-04-11 15:11:35 John

不幸的是運行這個造型通過預覽渲染並沒有表現出任何的區別，雖然從語法來看我想象它應該是一個很好的解決方案 - 基於WebKit與MS調整文字大小完全涵蓋了這個問題。雖然我認爲文字大小調整屬性並非Campaign Monitor的電子郵件樣式[兼容性列表]（http://www.campaignmonitor.com/css/）上的mentoend，但我仍然會想象Apple Mail將不會接受它的問題，因爲客戶似乎已經接受了大量不同的CSS規則。 – user3494572

這是HTML電子郵件衆所周知的「規範化」技巧。請參閱[html電子郵件樣板]（http://htmlemailboilerplate.com/），該行業的大多數設計人員都參考設置其文檔。如果這不起作用，如上所述，唯一的方法是如果您有條件地開始定位客戶端。您可以通過條件語句來指定Outlook，也可以通過在style標記中使用CSS覆蓋內聯CSS（Gmail不支持）來定位Gmail。但最終，一旦你走上了「黑客攻擊」路線，你會以最小的收益將你的工作翻倍，並且你仍然會對主要客戶產生分割的結果。 – John

這是非常豐富的約翰，我認爲在未來的項目上使用樣板將是明智的。我同意備份計劃過於黑暗，但仍然適用於所提議的情況。如果我只是錯誤地測試了你的解決方案，結果我與Narong一起，我會讓你知道我發現了什麼，所以我必須回去重新檢查。 – user3494572

編碼HTML：字體大小在Apple Mail比微軟Outlook始終較大

回答

相關問題