模板的 Gmail 兼容性

Question

我正在使用一个“导入”的mail template that I'd like to use through gmail but I saw on CanIMail网站：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

和“link”：

<link href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

不兼容，这是个大问题，因为我有一个 bootstrap 图标不会显示给邮件收件人，他也看不到 google 我也需要的字体。

请问有什么办法可以克服这个问题吗？

Answer 1

不幸的是，Gmail 也不支持 @font-face 自定义字体：https://www.caniemail.com/features/css-at-font-face/ 即使您使用 @import 或 link 标签，字体（和图标字体）将不会被使用。

如果其他一切正常，一种选择是保留 Google 字体中的字体，但为 Gmail 等无法使用它们的客户端设置一些后备字体。例如：

font-family: Poppins, Avenir Next, Futura, Verdana, sans-serif;

根据您尝试执行的操作，Bootstrap 也可能无法像您预期的那样工作 — 有一些类似的框架是专门为与电子邮件客户端兼容而编写的，因为像 Gmail 这样的框架仍然存在偏差，所以与当今浏览器支持的内容大相径庭。

如果您只使用少量图标，将这些特定图标转换为 PNG 图像可能会更好。

模板的 Gmail 兼容性

Gmail compatibility for templating

import

fonts

gmail

templates

hyperlink