为什么我的 webfonts 不再适用于 iOS 邮件客户端？答案

【问题标题】：Why do my webfonts no longer work on the iOS mail client?为什么我的 webfonts 不再适用于 iOS 邮件客户端？
【发布时间】：2019-06-13 11:30:24
【问题描述】：

几个月前，我的 webfonts 停止在 iOS 邮件客户端上运行。 I'm not the only one to have experienced this.

我使用的代码是这样的：

<link rel="stylesheet" id="magazine-font-aleo-css" href="https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css" type="text/css">

您可以自己view the resulting CSS，但这里是摘录：

@font-face {
    font-family: 'Aleo';
    src: url('aleo/Aleo-Regular-webfont.eot');
    src: url('aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('aleo/Aleo-Regular-webfont.woff2') format('woff2'),
         url('aleo/Aleo-Regular-webfont.woff') format('woff'),
         url('aleo/Aleo-Regular-webfont.ttf') format('truetype'),
         url('aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

字体然后内嵌在body标签上。

<body style="background-color:#f0f0f0; color:#333; font-family:Aleo, serif; font-size:18px; font-weight:400; line-height:1.625;margin:0;">

我找不到任何关于 iOS 上的更改的文档。我很乐意收到以下答案：(a) 告诉我问题所在，或 (b) 就如何诊断问题提供建议。

【问题讨论】：

您似乎没有将字体链接到电子邮件的网址。 CSS 也没有。

标签： ios css email html-email webfonts

【解决方案1】：

您可以尝试几件事：

1. 您链接的 Litmus 线程建议使用 @import 而不是 <link> 来引用字体文件。所以：

<style>
  @import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
</style>

2.我最近使用<link>标签成功地让网页字体显示在iOS Mail中，但我的代码如下所示：

<!--[if mso]>
  <style>
    * {
      font-family: sans-serif !important;
    }
  </style>
<!--<![endif]-->

<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700" rel="stylesheet">
<!--<![endif]-->

这会从 Outlook 中隐藏 <link> 标记，这似乎会阻塞它并导致问题。我刚刚在 Litmus 中对此进行了测试，它显示了网络字体。

要检查原始代码的另一件事是移动 as 并对完整 URL 进行硬编码。

<style>
  @import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
  @font-face {
    font-family: 'Aleo';
    src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot');
    src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff2') format('woff2'),
         url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff') format('woff'),
         url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.ttf') format('truetype'),
         url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
</style>

【讨论】：