html-email - Outlook 2007 / 2013 不呈现 CSS 字体系列声明

Question

我正在使用 Litmus 测试电子邮件设计，我终生无法在 Outlook 2007 / 2010 / 2013 中正确设置我的字体。每一个 HTML / CSS 技巧 / hack 都会继续在 Times New Roman 中呈现：

`

我主要使用简单的表格进行布局，因此所有内容最终都在 TD 元素中。

以下是我尝试设置字体的各种技术。

我的 STYLE 声明：在 HEAD 和 BODY 标签中都试过这个，但都不起作用。

<style>
@font-face {
    font-family: proxima-nova;
    src: url('assets/ProximaNova-Reg.otf');
}
@font-face {
    font-family: proxima-nova-blk;
    src: url('http://assets/ProximaNova-Black.otf');
}
body *, td, p, li {
    font-family: font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif;
}
</style>

在 TD 元素上设置的 CSS STYLE 属性：

  <td style="font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif; color:#FFFFFF; font-weight:300;font-size:18px;">

设置了 FACE 和 STYLE 属性的 FONT 标签：

<font face="proxima-nova,Proxima Nova Regular,Proxima Nova,verdana,sans-serif"  
    style="font-size:28px; 
    font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif;">

所有内部文本元素（P、LI、A）的内联 CSS STYLE 属性：

我完全感到困惑。在所有其他相关客户端上，一切都正常工作（即字体正在渲染，因为我期望考虑到各种错误和渲染怪异），包括 iOS、Gmail、Outlook 2003 / Express 等：

Answer 1

我将问题追溯到我的 STYLE 声明，该声明使用@font-face 拉入自定义字体文件以支持客户端（即 Apple）。显然，在 Outlook 2007 - 20013 中，这种使用 @font-face 声明的方法中断了。

<style>
@font-face {
    font-family: proxima-nova;
    src: url('http://assets/ProximaNova-Reg.otf');
}
@font-face {
    font-family: proxima-nova-blk;
    src: url('http://assets/ProximaNova-Black.otf');
}
</style>

我需要让 MS Outlook 忽略这个 STYLE 标签，所以我用标签包裹了整个块[if !mso]：

<!--[if !mso]><!-->
<style>
@font-face {
...  
}
</style>
<!--<![endif]-->

哇，这让我快疯了。

Answer 2

我已经使用 [if !mso] 标签尝试了您的解决方案，但由于某种原因它不起作用。我最终找到了一个不同的解决方案：

您可以使用带有 face-attribute 的 font-tag 在 Outlook 2007/2010/2013 等客户端中强制使用正确的备用字体。例如：

<td style="color:#FFFFFF; font-weight:300;font-size:18px;">
    <font face="proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif"
</td>

我在 Litmus 和 Outlook 2007/2010/2013 中对此进行了测试，它会回退到 Verdana，在支持自定义字体的客户端中，它会显示 proxima-nova。

我希望这有帮助。