Outlook 2007/2013不呈现CSS字体系列声明 [英] Outlook 2007 / 2013 not rendering CSS font-family declarations

问题描述

我正在用Litmus测试电子邮件设计，为了我一生，我无法在Outlook 2007/2010/2013中正确设置字体.每个HTML/CSS技巧/黑客都继续在Times New Roman中呈现:

I'm testing an email design with Litmus and for the life of me I cannot get my fonts to be properly set in Outlook 2007 / 2010 / 2013. Every single HTML / CSS trick / hack continues to render in Times New Roman:

`

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

I'm mostly using simple tables for layout, so all content is ultimately inside a TD element.

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

Here are the various techniques I've tried to set the font.

我的STYLE声明:已在HEAD和BODY标签中尝试过此操作&都行不通.

My STYLE declaration: Have tried this in both the HEAD and BODY tags & neither works.

<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属性:

CSS STYLE attribute set on TD elements:

  <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 tag with both FACE and STYLE attributes set:

<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等.

I am COMPLETELY baffled. On all other relevant clients everything is working as well as can be expected (i.e. fonts are rendering as I'd expect given various bugs & rendering weirdnesses), including iOS, Gmail, Outlook 2003 / Express, etc.:

推荐答案

我将此问题追溯到我的STYLE声明，该声明使用@ font-face提取自定义字体文件以支持客户端(例如Apple).显然，有关@ font-face声明的这种用法在Outlook 2007-20013中会中断.

I traced the issue to my STYLE declaration, which uses the @font-face to pull in a custom font file for supporting clients (i.e. Apple). Apparently, something about this use of the @font-face declaration breaks in 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]标记包裹了整个块:

I needed to get MS Outlook to ignore this STYLE tag, so I wrapped the entire block with the [if !mso] tag:

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

哇，那真让我发疯.

这篇关于Outlook 2007/2013不呈现CSS字体系列声明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！