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

Question

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

这是我的代码：

<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 字体，但它根本不显示文本。

Answer 1

这可能是隐形文本闪现 (FOIT)，但在某些情况下它比闪现.

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

如果文本应有的地方有空格，电子邮件客户端可能会检测到 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]-->

Answer 2

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

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

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

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

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

这有什么帮助。

Answer 3

我试过你的例子，对我来说，文字出现了。对于这个问题，Ted 可能是正确的。

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

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

Answer 4

正如其他答案所说，这可能是 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 覆盖部分。

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

Getting @font-face to work in html email

fonts

html-email

font-face