问如何将字体系列样式添加到Html电子邮件模板
EN

Stack Overflow用户

提问于 2018-09-04 08:15:22

回答 3查看 5.6K关注 0票数 1

嘿，我有一个问题，添加字体样式到我的确认模板，我发送给我的客户的电子邮件订单完成后。我知道内联css在html电子邮件模板中工作得很好，但我正在尝试添加来自google的Heebo字体系列，我可以将其加载到head标签中，这在gmail和hotmail上不起作用。

现在这是我的头。但正如我所说，它在gmail或hotmail中不起作用。

css

templates

fonts

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-09-04 08:24:46

快速回答。你不能这么做。

gmail、hotmail、outlook等出于安全原因阻止外部字体。

正因为如此，邮件通常是用图像而不是100%的文本构建的。

如果您不想使用图像，则必须使用安全字体(所有操作系统中都存在的字体)。

祝你好运

票数 0

Stack Overflow用户

发布于 2018-09-04 17:37:10

我以这种方式包含它。你可以从Google网页字体中得到这个。它适用于Outlook (IOS)，Apple Mail，iPad，iPhone。其余的不支持web字体。所以你应该有一个默认的后备字体。

理想情况下，你的电子邮件应该是基于实时文本/图像的混合邮件。

现在100%以图片为基础有点过时了，因为当浏览器自动隐藏图片时，你看不到任何东西，不能搜索任何东西，也不能突出显示任何有用的信息，比如产品名称。

这篇有用的文章介绍了这一点：

https://litmus.com/blog/the-ultimate-guide-to-web-fonts

@media screen {
 /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqhPANqczVsq4A.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
}