Question

我正在尝试将我的电子邮件字体更改为打开sans，但是，我遇到了Gmail呈现正确字体的问题。我设法找到了解决Outlook问题的方法。这就是我所拥有的：

body {

        @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; }

然而，Gmail决定展示Arial，而Google Inbox决定展示Helvetica ..看起来Google的邮件服务只是覆盖了我提供的任何内容。有人可以帮忙吗？

解决方案

Salvimatus的解决方案有效：

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

需要手动添加范围。

Answer 1

Gmail不支持@ font-face。

为了自定义字体，您应该在每个文本块中内联编写：

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

注意：必须是我们在Windows或Mac上本机的字体。

Answer 2

在线样式绝对是最好的做法，但似乎主要的电子邮件客户端确实支持向html文件头部中包含的CSS添加字体声明。

由于Aaron提到自定义字体在电子邮件中不起作用，并且很可能永远不会在可预见的将来使用。通过事先与客户或设计师讨论来避免这种情况。只有websafe fonts才会显示在电子邮件客户端中，即使这样，您也会在领先和字距调整的跨平台上获得混合结果。

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>。在这种情况下，它最后读取，因此由电子邮件客户端呈现。

Answer 3

根据广告系列监察员帖子：Guide to CSS support in email Gmail不支持@font-face规则。实际上它几乎不支持任何东西。：/

Answer 4

如果在font-family声明的开头添加自定义字体，则在内联css中，windows中的Outlook桌面应用程序将开始在“Times New Roman”中呈现字体。要绕过此问题，请在媒体查询中设置自定义字体系列。

因此，您的内联字体系列声明可以是

font-family: Arial, sans-serif;

并将其添加到HTML文件的head部分首先从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没有问题，您的自定义字体将在所有支持它的人中呈现。

Gmail未显示正确的字体

4 个答案: