Gmail 没有显示正确的字体答案

【问题标题】：Gmail not showing correct fontGmail 没有显示正确的字体
【发布时间】：2015-02-26 16:37:52
【问题描述】：

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

身体{

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

span需要手动添加。

【问题讨论】：

标签： html css fonts gmail

【解决方案1】：

Gmail 不支持@font-face。

如果您自定义字体，您应该在您拥有的每个文本块中写入内联：

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

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

【讨论】：

【解决方案2】：

根据 Campaign Monitors 的帖子：Guide to CSS support in email Gmail 不支持 @font-face 规则。实际上它几乎不支持任何东西。：/

【讨论】：

【解决方案3】：

内嵌样式绝对是最佳实践，但似乎主要的电子邮件客户端确实支持向包含在 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>。在这种情况下，它是最后读取的，因此由电子邮件客户端呈现。

【讨论】：

【解决方案4】：

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

所以，你的内联 font-family 声明可以是

font-family: Arial, sans-serif;

并将其添加到 HTML 文件的头部首先从 Google fonts 获取字体

<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 没有问题，并且您的自定义字体将呈现在所有支持它的字体中。

【讨论】：