Question

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

Answer 1

这可能是隐形文本Flash（FOIT），但在某些情况下，它比 Flash 更长。

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

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

旁注：不确定在<style>中放置<body>标记是否会抛出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，Native 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;}

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

这有多大帮助。

Answer 3

我尝试了你的例子，对我来说文字出现了。对于这个问题，泰德可能在FOIT上是正确的。

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

如果要防止此行为，首先需要在文本周围定义包装元素。然后使用mso条件语句为包装器应用“CSS修复”。您可以在本教程中阅读正确的用法：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电子邮件中工作

4 个答案: