Gmail не показывает правильный шрифт

Я пытаюсь изменить шрифт своих электронных писем на открытый без шрифта, однако у меня возникают проблемы с отображением Gmail правильного шрифта. Мне удалось найти способ решить проблему для Outlook. Вот что у меня есть:

тело {

        @font-face {
                font-family: 'Open Sans';
                font-style: normal;
                font-weight: 300;
                src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
            }
        }

Я также пробовал другие вещи, такие как объявление всего текста открытым без:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300'rel='stylesheet'type='text/css'>
     <style type="text/css">
    .stylealltext { font-family: 'Open Sans', sans-serif;}
    .stylealltextbold {font-weight: bold; font-family: 'Open Sans', sans-serif; }

However, Gmail decides to show Arial, while Google Inbox decides to show Helvetica.. It looks like Google's mailing services just overrides whatever I feed it. Can anyone help?

Решение

Решение Salvimatus сработало:

<span style="font-family: your-chosen-font">your text</span>

Диапазон необходимо добавить вручную.


gmail html fonts css
person Hadi    schedule 26.02.2015    source источник

Ответы (4)


arrow_upward
13
arrow_downward

Gmail не поддерживает @font-face.

Чтобы настроить шрифт, вы должны написать встроенный текст в каждый блок текста, который у вас есть:

< span style="font-family: your-chosen-font">your text< /span>

Примечание: это должен быть шрифт, изначально имеющийся в Windows или Mac.

person salvimateus    schedule 26.02.2015

arrow_upward
3
arrow_downward

Стилизация в строке, безусловно, является лучшей практикой, однако, похоже, основные почтовые клиенты поддерживают добавление объявления шрифта в CSS, включенное в заголовок html-файла.

Как отмечает Аарон, пользовательские шрифты не работают в электронных письмах и, скорее всего, никогда не будут работать в обозримом будущем. Избегайте этого, предварительно обсудив это с клиентами или дизайнерами. Только веб-безопасные шрифты будут отображаться в почтовых клиентах, и даже в этом случае вы получите смешанные результаты в ведущих и кроссплатформенный кернинг.

Salvimateus прав, что следующее решение будет пуленепробиваемым.

< span style="font-family: your-chosen-font">your text< /span>

Однако это также будет работать:

<table>
  <tr>
    <td style="font-family: your-chosen-font;">Your text here <br> more text.</td>
  </tr>
</table>

Как и это:

// CSS added to the <head> of the email
<style>
  .myClass{ font-family: your-chosen-font; }
</style>

// Class added to the <td> element in the <body> of the email
<table>
  <tr>
    <td class='myClass'>text here <br> more text.</td>
  </tr>
</table>

Я могу подтвердить, что последний вариант, по-видимому, работает в основных почтовых клиентах (Gmail, Outlook, iOS) как для настольных компьютеров, так и для мобильных устройств, и я также видел хорошие результаты на телефонах с Windows.

В основном это происходит из-за того, что электронная почта перекомпилируется сторонним программным обеспечением для электронного маркетинга, которое вы, естественно, используете, а css подставляется компилятором.

Конечным результатом здесь является меньшая начальная работа для разработчика.

В качестве примечания, если вы добавили все три (просто для уверенности) - тогда решение Salvimateus превзойдет все остальные как он применяется к <span>. В этом случае оно читается последним и, следовательно, отображается почтовым клиентом.

person mydigitalodyssey    schedule 04.05.2015

arrow_upward
2
arrow_downward

Согласно сообщению Campaign Monitors: Руководство по поддержке CSS в электронной почте Gmail не поддерживает правило @font-face. На самом деле он почти ничего не поддерживает. :/

person DNReNTi    schedule 26.02.2015

arrow_upward
0
arrow_downward

Во встроенном css, если вы добавите собственный шрифт в начале объявления семейства шрифтов, настольные приложения Outlook в Windows начнут отображать шрифт в «Times New Roman». Чтобы обойти эту проблему, установите пользовательское семейство шрифтов в медиа-запросе.

Итак, ваше встроенное объявление семейства шрифтов может быть

font-family: Arial, sans-serif;

И добавьте это в раздел заголовка вашего HTML-файла. Сначала получите шрифт из шрифтов Google.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

Затем добавьте медиа-запросы

@media screen and (max-width: 600px) {
table, td, span, p, div {
font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;}
}

@media screen and (min-width: 600px) {
table, td, span, p, div {
font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;}
}

Это гарантирует отсутствие проблем с Outlook, и ваш собственный шрифт будет отображаться во всех тех, которые его поддерживают.

person MD Tarik Hasan Khan    schedule 19.06.2017