Gmail 未显示正确的字体

Question

我正在尝试将我的电子邮件的字体更改为 open sans，但是，我在 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; }

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

解决方案

Salvimatus 的解决方案有效：

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

span需要手动添加

Answer 1

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

Answer 2

Gmail 不支持@font-face。

对于您自定义的字体，您应该在您拥有的每个文本块中内联：

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

注意：必须是 Windows 或 Mac 上的原生字体。

Answer 3

内联样式绝对是最佳实践，但似乎主要的电子邮件客户端确实支持向 html 文件头部包含的 CSS 添加字体声明。

因为 Aaron mentions custom fonts do not work in emails and most likely never will for the foreseeable future. Avoid this by discussing beforehand with clients or designers. Only 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 手机上也看到了不错的效果。

这主要是由于电子邮件被您自然使用的第 3 方电子邮件营销软件重新编译，并且 css 被编译器内联推送。

这里的最终结果是减少了开发人员的初始工作。

作为旁注，如果您碰巧将所有三个都添加（只是为了确定） - 那么 Salvimateus 解决方案将胜过所有其他解决方案，因为它应用于 <span>。在这种情况下，它是最后读取的，因此由电子邮件客户端呈现。

Answer 4

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

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

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

Gmail 未显示正确的字体

Gmail not showing correct font

html

css

fonts

gmail