在使用带有@font-face 声明的自定义字体时,Outlook 回退到 Times New Roman 时遇到了一些麻烦。我不仅必须使用它自己的样式块周围的条件从 Outlook 中隐藏 @font-face 声明。(所有其他样式放在另一个块中)。我还必须使用条件标签将我的文本内容双重包装在跨度中。仅举一个示例,说明@CodeMoose(上图)发布的这种技术在使用自定义字体时如何工作。
<!--[if !mso]><!-->
<style type="text/css">
@font-face {
font-family: 'Museo100';
src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot');
src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff') format('woff'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf') format('truetype'),
url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100') format('svg');
font-weight: normal;
font-style: normal;
}
<!--<![endif]-->
首先,我尝试将条件围绕我的“Museo300”字体声明放在内联样式中,但这显然不起作用,所以我不得不将我的内容双重包装成两个带有样式声明的跨度。内部是非 MSO 的条件。
<span style="color: #00B2EB; font-family: arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: normal;">
<!--[if !mso]><!--><span style="font-family: Museo100;"><!--<![endif]-->
Text goes here, shown in Museo in Apple mail while this method shows in Arial in Outlook (and others that do not support custom fonts
<!--[if !mso]><!--></span><!--<![endif]-->
</span>
这非常适合让 Outlook 以 Arial 显示文本,而 Apple 邮件将以 Museo 字体显示文本。其他客户端(如 Android 上的邮件)具有正常的回退行为,仅显示 Arial。