【问题标题】：Can Outlook 2010 use a web font in an html email?Outlook 2010 可以在 html 电子邮件中使用网络字体吗？
【发布时间】：2014-02-23 09:34:11
【问题描述】：

我已经尝试了几件事，包括包装 css。关于如何让 html 电子邮件 Outlook 2010 使用网络字体而不是默认预装字体的任何想法？

这是我尝试过的一些东西：

    <style type="text/css">
    @font-face {
    font-family: 'thegirlnextdoor';
    src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /* IE9 Compat Modes */
    src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */    url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff') format('woff'), /* Modern Browsers */
     url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg') format('svg'); /* Legacy iOS */
}
</style>

【问题讨论】：

你告诉font-family在哪里使用？你确定它没有被覆盖吗？
我猜它被覆盖了。它只是使用系统中的任何字体，我相信它默认为 Times New Roman。

标签： html css email

【解决方案1】：

以下技术不需要重复使用条件 cmets。我已经对此进行了广泛的测试：

像往常一样内联您的网络安全字体系列，但在元素上添加一个额外的类名。（如果您使用的是自动 CSS 内联，则可以使用 .webfont 类名指定您的网络安全字体和其余 CSS。）
```
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
```

在<head> 中，使用您的网络字体覆盖网络安全字体系列，如下所示：

<style type="text/css">
  @import url(http://mysuperjazzywebfont.com/webfont.css);

  @media screen { /* hides this rule from unsupported clients */ 
    .webfont {
       font-family: "Super Jazzy Webfont", arial, sans-serif !important;
    }
  }
</style>

注意：将 .webfont 类包装在简单的 @media screen 查询中只会防止 Outlook 07、10 和 13 错误地使用 Times New Roman 而不是备用字体。 Reference

这些客户端显示网络字体：

苹果邮件
iOS 邮件
Android 4.2 Stock Mail 客户端
莲花笔记 8
展望 2000
展望 2011
AOL Webmail（在支持@media的浏览器中）

以下 Outlook 版本获得 Arial：

展望 2002
展望 2003
Outlook 2007（而不是 Times New Roman）
Outlook 2010（而不是 Times New Roman）
Outlook 2013（而不是 Times New Roman）

...和许多其他更可预测的客户获得 Arial。

【讨论】：

使用@media screen 与完全删除它而只使用.webfont { ... } 有什么区别？
一个快速的谷歌提醒我。来自here：“如果您在 HTML 电子邮件中使用 @font-face，Outlook 07/10/13 将默认所有文本返回 Times New Roman ... 将字体导入代码包装在一个简单的媒体查询中会在 Outlook 中隐藏这一点” .这是通过恢复为 Times New Roman 来阻止那些不尊重字体堆栈的 Outlook 版本。更新了反映的答案。
谢谢你，我记得以前遇到过这个问题，不知道为什么。
感谢 2020 年，@JoshHarrison - 非常感谢。考虑到电子邮件客户的逗留时间，这一点解释得很好，很有帮助，而且显然仍然相关。

【解决方案2】：

Outlook '03、'07、'10 和 '13 不支持网络字体。 Outlook '00 和 '11 可以。

您还必须注意回退。如果您在堆栈中放入带引号的字体声明或 webfont，不受支持的 Outlook 版本将恢复为 Times New Roman，完全忽略您的字体堆栈。经过大量测试，这似乎是所有客户端的最佳解决方案。

把它放在你的标题样式标签中：

@import url(http://fonts.googleapis.com/css?family=Lobster);

像这样使用它：

<font style="font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;">
<!--[if (!mso 14)&(!mso 15)]><!--><font style="font-family: Lobster, 'Lobster', Arial, Helvetica, sans-serif; font-size: 18px; color: #000000;"><!--<![endif]-->
Your text here
<!--[if (!mso 14)&(!mso 15)]><!--></font><!--<![endif]-->
</font>

这应该在支持 webfonts 的客户端中工作，并在其余部分优雅地回退到字体堆栈。如果您愿意，也可以在 <td> 中声明您的外部堆栈。

是的，我知道，Lobster 是一种丑陋的网络字体，但它在测试时效果很好......

【讨论】：

我读到 gmail（和其他）去掉了和标签。所以所有不是内联样式的都不会显示。请参阅此处：kb.mailchimp.com/campaigns/ways-to-build/css-in-html-email（请参阅“使用内联 CSS”），如果这是真的，此技术将无法在此处使用...
@olefrank 不支持样式标签的电子邮件客户端不能支持网络字体，因为将它们添加到 html 的唯一方法是通过@import。此解决方案提供了那些受支持的客户端的最大覆盖范围，并且不是“适用于所有客户端”的解决方案，它不存在。顺便说一句，Gmail 最近增加了对样式标签的支持。

【解决方案3】：

我真的很喜欢 Zougen Moriver 的回答。虽然我担心<head> 被剥夺。

我尝试在条件语句中隐藏字体堆栈，但它对我不起作用。 @import 也没有。所以我用这样的字体标签包装了每个副本块：

<span style="font-family: ProximaNova-Reg, Arial, sans-serif; font-size: 16px; color: #333333; mso-line-height-rule: exactly; line-height: 20px; text-align:left;"><font face="Arial, sans-serif;">It’s an unforgettable night of friends, thrills, memories and laughs topped off with a performance by TBD on the Music Plaza stage. No senior should miss this once-in-a-lifetime experience.</font></span>

它在测试期间工作。

这样，如果 <head> 被剥离，那么返回到 Aril 的回退保持不变。

不利的一面是，将 <font> 放在每个副本周围是一件乏味的工作。

【讨论】：

如果<head> 标签被剥离，您的webfont 导入不会随之被剥离吗？您如何/在哪里使用此解决方案导入 webfont？我很好奇……
@ZougenMoriver 我们在自己的服务器上托管网络字体。我不记得它是否仍然使用此解决方案引入 webfont，但至少它会选择堆栈中的下一个字体（即在这种情况下为 Arial），而不是默认为 Times。

【解决方案4】：

我喜欢乔什·哈里森的回答。但是你必须在“移动”断点上重复这个吗？即有

@media screen {  
    h1 { font-family: Merriweather,Georgia,serif !important; }
    h2 { font-family: Merriweather,arial,sans-serif !important; }
    p { font-family: Merriweather,arial,sans-serif !important; }
}

@media screen and (max-width: 660px){
    #main_table { width:92% !important; }
    h1 { font-family: Merriweather,Georgia,serif !important; }
    h2 { font-family: Merriweather,arial,sans-serif !important; }
    p { font-family: Merriweather,arial,sans-serif !important; }
}

【讨论】：

【解决方案5】：

我个人从未尝试过这样做，但是由于您已经定义了字体，我会尝试以下操作，看看它是否会被应用：

html, body{
    font-family: 'thegirlnextdoor', sans-serif !important;
}

如果您对“thegirlnextdoor”上的font-family 有其他偏好，但无法正确下载，您可以在它之后添加它，就像我添加无衬线字体系列一样。

请注意，如果在网络邮件客户端中使用它，sn-p my 会产生不良影响。如果是这种情况，您将需要找到应用它的部分。例如，仅将其应用于p 标签。在大多数情况下，定义一个类并自己应用它可能是最安全的：

<style>
    @font-face {
        font-family: 'thegirlnextdoor';
        src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'); /*   IE9 Compat Modes */
        src: url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot? #iefix') format('embedded-opentype'), /* IE6-IE8 */      url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff')  format('woff'), /* Modern Browsers */
        url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf')    format('truetype'), /* Safari, Android, iOS */
        url('http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg')    format('svg'); /* Legacy iOS */
    }

    .fancy-font {
        font-family: 'thegirlnextdoor', sans-serif !important;
    }
</style>

并像这样应用它：

<span class="fancy-font">My e-mail title</span>

编辑

在找到此link 并浏览它时，Word 或 Outlook 不支持@font-face。如果您真的想使用该字体，您很可能必须将该字体安装到所有可以接收电子邮件的计算机上，并在未安装时有一个合适的后备方案。

【讨论】：

我试过但没用。似乎是个好主意。我认为 !important 会让它做一些事情。当我在 Safari 中打开它时它可以工作，但我正在 Outlook 2010 中对其进行测试，这是一个古怪的程序。
@MattBrown 查看我的更新。基本上，Word 和 Outlook 不支持@font-face 规则。
You don't need quotes around font-families.
@Joeytje50 您不需要这样做，但最好的做法是避免遇到可能的问题。