为电子邮件客户端编写HTML：Apple Mail中的字体大小始终大于Microsoft Outlook

我一直在遵循各种在线指南，比如CampaignMonitor上的指南，构建一个HTML页面，以便在电子邮件客户端中查看。对于那些不熟悉的人来说，这本质上意味着用HTML表和内联CSS构建页面，以创建普通网页的外观和格式。这种不同的编码行为是由于大多数电子邮件客户端限制了大量CSS样式规则。为了进行测试，我一直在使用Acid上的Email来预览我的页面在各种电子邮件客户端上的呈现方式

我遇到的问题是，Microsoft Outlook中的文本看起来小于真实字体大小（在Chrome、Firefox或Safari中查看），而Apple Mail中的文本看起来大于真实字体大小。由于我希望我的页面在这两个平台上都能呈现出来，所以我需要找到解决这个问题的方法

是一张显示每个平台的比较情况的图像。请注意，Apple Mail上的文本如此之大，以至于打破了表格的高度。毫不奇怪，简单地减少Apple Mail的文本大小并不是一个选项，因为它会将Outlook中的文本压缩到遗忘状态

如果你熟悉电子邮件的编码，你就会知道这是一项混乱的工作，需要你打破许多编码方面的常识惯例——包括可读性。为了帮助阅读源代码，有一个清晰地标记每个表的开始和结束位置的图像（在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>

知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。
这是一种令人厌恶的行为，因为它是一种不平等的行为。
除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
=Sed ut PERPICIATIS unde omnis ISTUS natus error sit VOLUPTATE M ACCOUNTIUM doloremque laudantium，totam rem aperiam。
在vero eos和accusamus和iusto Digio Dignessimos ducimus qui Blanditis Praesenium voluptatum deletiti At que Corruption
除铜酸盐以外的其他物质和物质，
同样地，我们也应该为自己的行为负责，
这是我的劳动和财富。这是一个很好的例子。
暂时的自由，以及解决方案，是一种无障碍的选择，它可以在脸上找到最大的位置，

你有这是你的

标签吗

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

显然，在这种情况下，只有文本大小的内容是相关的

---

如果这还不能解决问题，那么你就没有什么别的办法了，除非你想开始尝试使用各种技巧组合来针对不同的客户机，根据客户机的不同支持来针对他们。

在iOS设备上显示更大的文本似乎是一个常见问题，但我还没有听说在Apple Mail中出现过这种情况。也许iOS设备的修复程序也适用于您。只需将其包含在您不希望调整大小的文本样式中即可。如果不希望调整任何文本的大小，请将其包含在正文标记的样式中

-webkit-text-size-adjust:none;

---

不幸的是，在预览渲染中运行这种样式并没有显示出任何区别，尽管从语法上看，我认为它应该是一个很好的解决方案——基于webkit和ms调整文本大小完全可以解决这个问题。虽然我认为文本大小调整属性在Campaign Monitor的电子邮件样式中不是mentioend，但我仍然认为Apple Mail接受它不会有问题，因为客户端似乎已经接受了大量不同的CSS规则。这是一个众所周知的html电子邮件“规范化”技巧。请参阅业界大多数设计师在设置文档时所参考的。如前所述，如果这不起作用，唯一的方法就是有条件地以客户为目标。您可以使用条件语句将Outlook或Gmail作为目标