如何为发送_FOM_ MS Outlook 2016的电子邮件签名创建Web字体堆栈

Question

我为自己创建了一个新的HTML电子邮件签名，我对结果感到非常满意。它使用字体堆栈，该字体堆栈首先尝试Web字体 open sans ，并且如果客户端无法显示Web字体，则落到 trebuchet MS 。我正在使用Outlook 2016来发送此新签名，以及Outlook 2016以及大多数其他现代电子邮件客户似乎都可以正确显示签名。

我遇到的问题是，Outlook 2013和Lower似乎无法处理Web字体，但同时忽略字体堆栈并重置为Times New Roman而不是我的后备字体。

这是一个众所周知的问题，其中有大量网络上可用的信息，包括几个代码示例如何避免或绕过它。我在该主题上发现的更好的概述之一是emailOnacid.com的博客条目。

虽然提议的策略在向发送电子邮件使用Outlook的其他第三方SMTP客户端时可能有效，但它们似乎不适用我想要发送电子邮件<的我strong>来自 Outlook。因为无论我在签名模板中实施哪种代码或条件，都可以通过将签名加载到要发送的电子邮件中的Outlook来解释，并且Outlook在发送之前根据自己的解释更改HTML。P>

任何人都知道一种将字体堆栈添加到HTML签名中的字体堆栈的方法，将从MS Outlook 2016发送，Outlook 2013或也许2010年将尊重正确的后备字体，而不仅仅是恢复为新的。罗马？

编辑

这是我当前 not 在我的签名文件中使用的代码的示例，因为下面列出的问题：

                <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
                <td style="font-family:'Trebuchet MS', Arial, sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
                    <span style="font-family: 'Open Sans', 'Trebuchet MS', Arial, sans-serif !important;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
                </td>

如果使用第三方SMTP客户端发送，则此代码在Outlook中接收时，将忽略跨度元素中的字体堆栈，而仅在TD元素中使用该代码。其他客户将正确渲染网络字体。但是，不幸的是，当从Outlook内发送Outlook时，Outlook在发送之前已经进行了转换。这意味着其他客户永远无法选择，只看到后备字体。

Answer 1

只是为了我的注意，我继续进行了一些测试，以查看所发送的代码发生了什么。当我们使用Outlook发送HTML（作为电子邮件）时，Outlook每次都会更改HTML。

例如，当通过Outlook 2013发送以下代码时：

<table align="center" aria-hidden="true" border="0" cellpadding="0" 
cellspacing="0" role="presentation" style="max-width: 600px;" widdth="100%">
<tbody>
    <tr>
        <td style="font-family:Trebuchet MS,Arial,sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
           <span style="font-family:Open Sans,Arial,sans-serif;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
        </td>
    </tr>
</tbody>
</table>

最终显示为：

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" style="max-width:450.0pt">
<tbody>
<tr>
<td style="padding:0cm 0cm 0cm 0cm">
<p class="MsoNormal" style="line-height:95%"><span style="font-size:8.5pt;line-height:95%;font-family:&quot;Open Sans&quot;;color:black">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span><span style="font-size:8.5pt;line-height:95%;font-family:&quot;Arial&quot;,sans-serif;color:black">
<o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>

Outlook实际上重写了大多数代码，以将MS认为正确的内容进行Outlook。现在您遇到的问题是为什么Outlook 2016将文本显示为不是 times new Roman是因为Outlook 2013添加了CSS，如下所示：

  @font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
  @font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
  @font-face
    {font-family:"Open Sans";}
  p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}

这确保了在安装该特定字体的设备上显示Calibri字体。没有钙纤维的前景将无法找到字体，并显示默认字体times new Roman。

从上面的测试中，Outlook 2016似乎仅是用Calibri作为字体发送电子邮件。我试图更改默认字体和主题，但仍在执行相同的操作。

编辑：

您从上面提到的链接中错过了一件重要的事情，即Web字体堆栈之后的!important。以下代码是您应该发送的内容：

<table align="center" aria-hidden="true" border="0" cellpadding="0" 
cellspacing="0" role="presentation" style="max-width: 600px;" 
width="100%">
<tbody>
    <tr>
        <td style="font-family:Trebuchet MS,Arial,sans-serif; color:#000000; font-size:11px; mso-line-height-rule:exactly; line-height:95%;">
           <span style="font-family:Open Sans,Arial,sans-serif !important;">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback</span>
        </td>
    </tr>
</tbody>
</table>

添加了重要的标签Outlook一旦将忽略您拥有的完整字体堆栈，并且在重写代码时将代码添加为Arial，这意味着现在应该正确显示字体。

<table class="MsoNormalTable" border="0" cellspacing="0" cellpadding="0" width="600" style="width:6.25in">
<tbody>
<tr>
<td style="padding:0in 0in 0in 0in">
<p class="MsoNormal" style="line-height:95%"><span style="font-size:8.5pt;line-height:95%;font-family:&quot;Arial&quot;,sans-serif;color:black">Text that should be displayed in Open Sans font, or Trebuchet MS as a fallback
<o:p></o:p></span></p>
</td>
</tr>
</tbody>
</table>

希望这就是您所追求的。

Answer 2

我感到你的痛苦。我每天都面临这个问题。我的公司品牌指南使用在我们网站上运行良好的WebFont，但与Outlook或Gmail呈现不佳。我为这个问题创建了一个解决方法，应该对您有用。

在Outlook的情况下，它不能完全支持Web字体。有些工作，有些没有，这很受欢迎。我认为是'Open Sans'之类的名称中的差距引起了问题。当Outlook遇到问题时，它会恢复为新罗马人。具有讽刺意味的是，新罗马人是默认字体，其名称中没有差距。

Arial是我们为替换选择的后备字体，因此我专门为Outlook创建样式表：

<!--[if (gte mso 9)|(IE)]>
<style>
  * {font-family: Arial, sans-serif !important;}
</style>

Gmail根本不使用Google字体。因此，开放的sans永远不会渲染。解决方案是在指定打开sans后选择系统字体作为后备字体。在大多数其他电子邮件客户端中，一切都可以正常工作。

要记住的最后一件事，无论您用来发送电子邮件的电子邮件客户端的限制都会受到该客户端的限制。Outlook限制了您发送电子邮件的能力，就像它限制了为收件箱渲染它们的痛苦。

我对所有前景都不会脱颖而出，但这可能是您面临的问题。即使我基于Outlook，我也会使用其他服务在可能的情况下发送电子邮件。

祝你好运。