我正在使用Litmus测试电子邮件设计,并且在我的生活中,我无法在Outlook 2007/2010 / 2013中正确设置我的字体。每个HTML / CSS技巧/黑客都继续在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等:
答案 0 :(得分:9)
我将问题追溯到我的STYLE声明,该声明使用@ font-face为支持客户端(即Apple)提供自定义字体文件。显然,有关@ font-face声明的使用的一些内容在Outlook 2007 - 20013中断了。
<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]-->
哇,这让我发疯了。
答案 1 :(得分:1)
我已经使用[if!mso]标记尝试了您的解决方案,但由于某种原因它无法正常工作。我最终找到了一个不同的解决方案:
您可以将font-tag与face-attribute一起使用,以在Outlook 2007/2010/2013等客户端中强制使用正确的fallback-font。例如:
<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。
我希望这会有所帮助。