Html Gmail没有显示正确的字体_Html_Css_Fonts_Gmail

Html Gmail没有显示正确的字体

html css fonts gmail

Html Gmail没有显示正确的字体,html,css,fonts,gmail,Html,Css,Fonts,Gmail,我正在尝试将电子邮件的字体更改为open SAN，但是，我在Gmail呈现正确字体时遇到了问题。我设法为outlook找到了解决问题的方法。这就是我所拥有的：身体{ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open

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

我还尝试了其他方法，例如将所有文本声明为打开SAN：

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


.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需要手动添加。

根据活动监视器帖子：Gmail不支持

@font-face

规则。实际上它几乎不支持任何东西。：/

Gmail不支持@font-face

要自定义字体，应在每个文本块中内联写入：

您的文本
注意：必须是我们在Windows或Mac上本机使用的字体。
联机样式设计绝对是最佳做法，但似乎主要的电子邮件客户端确实支持将字体声明添加到html文件头中的CSS中
如前所述，自定义字体在电子邮件中不起作用，而且在可预见的未来很可能永远不会起作用。通过事先与客户或设计师讨论来避免这种情况。只会在电子邮件客户中显示，即使如此，在跨平台的领先和紧逼中，您也会得到好坏参半的结果
正确的是，以下将是防弹解决方案
< 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>

//添加到电子邮件结尾的CSS
.myClass{字体系列：您选择的字体；}
//类添加到电子邮件中的元素
文本在此
更多文本。

我可以确认最后一个选项似乎适用于桌面和手机的主要电子邮件客户端（Gmail、Outlook、iOS），我在Windows手机上也看到了不错的效果
这主要是因为您自然使用的第三方电子邮件营销软件正在重新编译电子邮件，而css是由编译器内联推送的
这里的最终结果是开发人员的初始工作更少
如果您碰巧添加了这三个选项（只是为了确保）-然后解决方案将胜过所有其他解决方案，因为它应用于
。在这种情况下，它是最后读取的，因此由电子邮件客户端呈现。
在内联css中，如果在字体系列声明的开头添加自定义字体，windows中的outlook桌面应用程序将开始以“Times New Roman”呈现字体。要绕过issue，在媒体查询中设置自定义字体系列
因此，您的内联字体系列声明可以
font-family: Arial, sans-serif;

并将其添加到HTML文件的head部分
首先从谷歌字体获取字体
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

这样可以确保outlook没有问题，您的自定义字体将在所有支持它的字体中呈现
@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;}
}