Почему мои веб-шрифты больше не работают на почтовом клиенте iOS? - PullRequest
Новая
       49

Почему мои веб-шрифты больше не работают на почтовом клиенте iOS?

0 голосов
/ 19 января 2019

Несколько месяцев назад мои веб-шрифты перестали работать на почтовом клиенте iOS. Я не единственный, кто испытал это.

Я использую следующий код:

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

Вы можете посмотрите полученный 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.Я был бы рад получить ответы, которые либо (а) говорят мне, в чем проблема, либо (б) дают советы о том, как я могу диагностировать проблему.

1 Ответ

0 голосов
/ 22 января 2019

Несколько вещей, которые вы можете попробовать:

1. Связанная с вами ветка Litmus предлагает использовать @import вместо <link> для ссылки на файлы шрифтов.Итак: 

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

2. Я недавно добился успеха в получении веб-шрифтов для отображения в Почте iOS с помощью тега <link>, но мой код выглядит следующим образом:

<!--[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]-->

Это скрывает тег <link> от Outlook, который, кажется, душит его и вызывает проблемы.Я только что проверил это в 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>
...