Question

几个月前，我的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）就如何诊断问题提供建议。

Answer 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中进行了测试，它显示了网络字体。

要检查原始代码的另一件事是对完整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>

为什么我的Web字体在iOS邮件客户端上不再可用？

1 个答案: