Outlook 2010 可以在 html 电子邮件中使用 Web 字体吗？

Question

提问by Matt Brown

I've tried several things, including wrapping the css. Any ideas on how to get an html email Outlook 2010 to use a webfont and not default to a preinstalled font?

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

Here is some of the stuff I've tried:

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

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

Answer 1

回答by Josh Harrison

The following technique does not require repetitive use of conditional comments. I have tested this extensively:

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

Inline your web-safe font family as usual, but with an extra classname on the element. (If you're using an automatic CSS inliner, it's OK to specify your web-safe fonts with the rest of your CSS using the .webfontclassname.)
```
<td style="font-family: arial, sans-serif;" class="webfont">Text</td>
```

In the <head>, override the web-safe font family with your webfont like so:

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

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

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

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

Note: wrapping the .webfontclass in the simple @media screenquery simply prevents Outlook 07, 10 and 13 from mistakenly using Times New Roman instead of your fallback fonts. Reference

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

These clients display the web font:

这些客户端显示 Web 字体：

Apple Mail
iOS Mail
Android 4.2 Stock Mail Client
Lotus Notes 8
Outlook 2000
Outlook 2011
AOL Webmail (in browsers that support @media)

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

The following Outlook versions get Arial:

以下 Outlook 版本获得 Arial：

Outlook 2002
Outlook 2003
Outlook 2007 (instead of Times New Roman)
Outlook 2010 (instead of Times New Roman)
Outlook 2013 (instead of Times New Roman)

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

... and numerous other more predictable clients get Arial.

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

Answer 2

回答by John

Outlook '03, '07, '10 and '13 do not support webfonts. Outlook '00 and '11 do.

Outlook '03、'07、'10 和 '13 不支持网络字体。Outlook '00 和 '11 就是这样。

You also have to be mindful of the fallback. If you put in a quoted font declaration, or a webfont in the stack, unsupported Outlook versions will revert to Times New Roman, completely ignoring your font stack. After much testing, this seems to be the best solution across all clients.

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

Put this in your header style tag:

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

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

Use it like this:

像这样使用它：

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

This should work in clients that support webfonts, and gracefully fall back to the font-stack in the rest. You could also declare your outer stack in a <td>if you prefer.

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

Yes I know, Lobster is an ugly webfont, but it worked well for testing...

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

Answer 3

回答by Justin

I personally have never tried to do this, but since you have defined the font face, I would try the following to see if it will get applied:

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

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

If you have additional preferences to the font-familyon 'thegirlnextdoor' not downloading properly, you can add it after it like I have done with adding the sans-serif font-family.

如果您font-family对 'thegirlnextdoor' 上的其他偏好没有正确下载，您可以在它之后添加它，就像我添加 sans-serif 字体系列一样。

Do note that if using this in a web mail client, the snippet my have undesirable effects. If that is the case, you will need to find the section to apply it to. For example, only apply it to ptags. In most case, it would probably be safest to define a class and apply it yourself:

请注意，如果在 Web 邮件客户端中使用它，该代码段会产生不良影响。如果是这种情况，您将需要找到要应用它的部分。例如，仅将其应用于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>

And apply it like so:

并像这样应用它：

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

Edit

编辑

Upon finding this linkand glancing over it, @font-faceisn't supported by Word or Outlook. If you really want to use the font, odds are you will have to install the font to all computers that could receive the e-mail and have a suitable fallback in-case it isn't installed.

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

Answer 4

回答by FrankDraws

I really like Zougen Moriver's answer. Although I worry about the <head>being stripped.

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

I tried hiding the font stack in a conditional statement but it didn't work for me. Neither did the @import. So I wrapped each block of copy with a font tag like so:

我尝试在条件语句中隐藏字体堆栈，但它对我不起作用。也没有@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>

It worked during testing.

它在测试期间工作。

This way if the <head>ever gets stripped then the fall back to Aril remains intact.

这样，如果<head>曾经被剥夺，那么回退到阿里尔仍然完好无损。

The down side is that it's tedious work to put that <font>around every block of copy.

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

Answer 5

回答by user2991837

I like Josh Harrison's answer. But do you have to repeat this on 'mobile' breakpoints? i.e. have

我喜欢乔什哈里森的回答。但是您是否必须在“移动”断点上重复此操作？即有

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

Outlook 2010 可以在 html 电子邮件中使用 Web 字体吗？

提问by Matt Brown

回答by Josh Harrison

回答by John

回答by Justin

Edit

编辑

回答by FrankDraws

回答by user2991837

相关推荐

最近更新

标签

Outlook 2010 可以在 html 电子邮件中使用 Web 字体吗？

提问by Matt Brown

回答by Josh Harrison

回答by John

回答by Justin

Edit

编辑

回答by FrankDraws

回答by user2991837

相关推荐

什么是 HTML 标签“div”的缩写？

HTML 图像未显示在 Gmail 中

Html 使 HTML5 视频海报与视频本身大小相同

Html 是否有一种纯 CSS 方法可以使输入透明？

相关推荐

最近更新

标签