Outlook 2010能否在html电子邮件中使用web字体？

我尝试过几种方法，包括包装css。关于如何让html电子邮件Outlook 2010使用webfont而不是默认的预装字体，您有什么想法吗

以下是我尝试过的一些东西：

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

@字体{
字体系列：“thegirlnextdoor”；
src:url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'）；/*IE9兼容模式*/
src:url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot?#iefix“）格式（'embedded-opentype'），/*IE6-IE8*/url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff“）格式（'woff'），/*现代浏览器*/
url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf“）格式（'truetype'），/*Safari、Android、iOS*/
url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg“）格式（'svg'）；/*旧版iOS*/
}

我个人从未尝试过这样做，但既然您已经定义了字体，我将尝试以下方法，看看它是否适用：

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

如果“TheGirlNext Door”上的

字体系列

没有正确下载，您可以在下载后添加它，就像我添加sans serif字体系列一样

请注意，如果在web邮件客户端中使用此选项，则代码段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>

@字体{
字体系列：“thegirlnextdoor”；
src:url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot'）；/*IE9兼容模式*/
src:url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.eot? #iefix'）格式（'embedded-opentype'），/*IE6-IE8*/url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.woff“）格式（'woff'），/*现代浏览器*/
url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.ttf“）格式（'truetype'），/*Safari、Android、iOS*/
url（'http://www.mercerhrs.com/email/nordstrom/274257/font/thegirlnextdoor.svg“）格式（'svg'）；/*旧版iOS*/
}
.花式字体{
字体系列：“thegirlnextdoor”，无衬线！重要；
}

并像这样应用它：

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

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

我的电子邮件标题

---

编辑

---

找到并浏览后，

@font-face

不受Word或Outlook支持。如果您真的想使用该字体，很可能您必须将该字体安装到所有可能接收电子邮件的计算机上，并在未安装时提供适当的备份。

Outlook“03”、“07”、“10”和“13”不支持webfonts。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的客户机，并在其余的客户机中优雅地返回到字体堆栈。如果愿意，还可以在

中声明外部堆栈

---

是的，我知道，Lobster是一种难看的webfont，但它在测试中效果很好…

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

像往常一样内联web安全字体系列，但在元素上有一个额外的类名。（如果您使用的是自动CSS内联，则可以使用

.webfont

类名将web安全字体与其他CSS一起指定。）

文本

在

中，使用webfont覆盖web安全字体系列，如下所示：

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

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

@导入url(http://mysuperjazzywebfont.com/webfont.css);
@媒体屏幕{/*对不受支持的客户端隐藏此规则*/
.webfont{
字体系列：“超级爵士Webfont”，arial，无衬线字体！重要；
}
}

注意：将

.webfont

类包装在简单的

@media屏幕

查询中可以防止Outlook 07、10和13错误地使用Times New Roman而不是您的备用字体

这些客户端显示web字体：

• 苹果邮件
• iOS邮件
• 安卓4.2股票邮件客户端
• Lotus Notes 8
• 展望2000
• 展望2011
• AOL Webmail（在支持

  @media

  的浏览器中）

以下Outlook版本为Arial版本：

• 展望2002
• 展望2003
• Outlook 2007（而非泰晤士报新罗马版）
• Outlook 2010（代替泰晤士报新罗马版）
• 2013年展望（代替《泰晤士报新罗马报》）

---

。。。还有许多其他更容易预测的客户使用Arial。

我非常喜欢Zougen Moriver的答案。尽管我担心

会被剥离

我尝试将字体堆栈隐藏在条件语句中，但它对我无效。

@也没有导入

。因此，我用字体标记包装了每个副本块，如下所示：

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

这是一个难忘的夜晚，朋友、激动、回忆和欢笑在音乐广场舞台上的TBD表演中结束。任何一位高年级学生都不应该错过这一千载难逢的经历。

它在测试期间起作用

这样，如果

曾经被剥离，那么返回假种皮的部分将保持完整

---

不利的一面是，在每一块副本周围都放置

是一项乏味的工作。

我喜欢乔希·哈里森的答案。但您是否必须在“移动”断点上重复此操作？i、 有

@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; }
}

---

您打算在哪里使用

font-family

？你确定它没有被覆盖吗？