6

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:

`Outlook 2010 screenshot from Litmus

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.

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>

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;">

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;">

Inline CSS STYLE attributes on all inner text elements (P, LI, A):

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

enter image description here

4

2 に答える 2

9

この問題は、@font-face を使用してクライアント (Apple など) をサポートするためのカスタム フォント ファイルを取り込む STYLE 宣言にあることがわかりました。どうやら、この @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]-->

うわー、それは私を夢中にさせていました。

于 2012-11-05T19:44:36.487 に答える