让@font-face 在 html 电子邮件中工作答案

【问题标题】：Getting @font-face to work in html email让@font-face 在 html 电子邮件中工作
【发布时间】：2017-08-31 01:34:07
【问题描述】：

我正在使用@font-face 来显示我购买的字体并且是自托管的。它在 Apple 设备上运行良好，但在某些版本的 Outlook 和 Android 中，我的文本没有显示在 - 只是文本内容应该在的一个大空白区域。

这是我的代码：

<head>
<style type="text/css">
@media screen {  
    @font-face {
        font-family: 'ElenaWebBasic';
        src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot');
        src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot?#iefix') format('embedded-opentype'),
             url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff2') format('woff2'),
             url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff') format('woff');
        font-weight:700;
        font-style:normal;
        }

    h1 {
        font-family:'ElenaWebBasic',Georgia,serif !important;
        font-weight:700 !important;
        }
    }
</style>
</head>

然后在里面，在<body> 的最顶部，我有以下内容：

<!--[if mso]>
<style type="text/css">
h1 {font-family: Georgia,serif !important; font-weight:400 !important;}
</style>
<![endif]-->

我假设 Outlook 会默认使用 Georgia,serif 字体，但它根本不显示文本。

【问题讨论】：

标签： fonts html-email font-face

【解决方案1】：

正如其他答案所说，这可能是 FOIT。

但管理 Outlook 桌面不支持字体这一事实的最佳方法是简单地包含“mso-font-alt”，如下所示：

@font-face {
        font-family: 'ElenaWebBasic';
        src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot');
        src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot?#iefix') format('embedded-opentype'),
             url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff2') format('woff2'),
             url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff') format('woff');
        font-weight:700;
        font-style:normal;
        mso-font-alt:Georgia;
        }

请注意，mso-font-alt 是单一字体，而不是字体堆栈。

然后您就不需要 Outlook 覆盖部分。

【讨论】：

【解决方案2】：

我尝试了您的示例，对我来说，文本出现了。在这个问题上，Ted 可能是正确的。

在基于 Word 的 Outlook 中，不应用外部导入的自定义字体，而是渲染引擎强制显示 Times New Roman。

如果你想阻止这种行为，首先你需要在文本周围定义一个包装元素。然后使用 mso 条件语句为包装器应用“CSS 修复”。您可以阅读本教程中的正确用法：http://blog.edmdesigner.com/typography-in-modern-html-emails/#fixingfallbackfontinwordbasedoutlooks

【讨论】：

【解决方案3】：

我发现 Outlook 有时不喜欢重要的标签。正如 Ted 建议的那样，将样式标签移到头部，并从 mso 条件语句中删除重要标签。

Web 字体仅适用于 AOL 邮件、本机 Android 邮件应用程序（不是 Gmail 应用程序）、Apple Mail、iOS 邮件、Outlook 2000、Outlook.com 应用程序。来源：https://litmus.com/blog/the-ultimate-guide-to-web-fonts

我今天创建了一封使用网络字体的电子邮件，我所做的是在 TD 样式和我使用的网络字体上使用网络安全字体堆栈：

*{font-family:(FONT NAME), (fallback font) !important;}

这意味着所有读取网络字体的设备都将使用网络字体，而其他设备将呈现 TD 样式中的字体。

这有什么帮助。

【讨论】：

【解决方案4】：

这可能是不可见文本的 Flash (FOIT)，但在某些情况下它比 Flash 长得多。

网络浏览器和电子邮件客户端都需要在显示之前下载网络字体（可能很明显）。根据浏览器/客户端和 Web 字体技术，有时会首先显示一个备用字体，有时 nothing 最初会显示...直到下载 Webfont。

如果文本应该有空格，电子邮件客户端可能会检测到 html 文本但不能（还）呈现字体。也许字体需要很长时间才能下载，或者根本无法下载。如果您使用的是 Litmus 之类的预览服务，则可以在下载和显示字体之前创建 Litmus 屏幕截图。（Litmus 预览中的图像始终会发生这种情况，即使它们工作得非常好。）

旁注：不确定在 <body> 中放置 <style> 标记是否会导致 Outlook 失效，但将其移至 <head> 在 Outlook 中是完全安全的：

<!--[if mso]>
    <style type="text/css">
        h1 {font-family: Georgia,serif !important; font-weight:400 !important;}
    </style>
<![endif]-->

【讨论】：

我认为这很可能是 FOIT。我在使用 Typekit 的网页设计中遇到过这种情况，如果这也发生在电子邮件应用程序和 Litmus 预览中，那将是有意义的。谢谢