时间戳

首页 > 解决方案 > 模板的 Gmail 兼容性

templates - 模板的 Gmail 兼容性

问题描述

我正在使用我想通过 gmail使用的邮件模板，但我在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 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">

不兼容，这是一个大问题，因为我有一个不会显示给邮件接收者的引导图标，而且他也无法看到我需要的谷歌字体。

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

标签： templatesimportfontshyperlinkgmail

解决方案

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

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

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

根据您尝试执行的操作，Bootstrap 也可能无法按您的预期工作——有一些类似的框架是专门为与电子邮件客户端兼容而编写的，因为像 Gmail 之类的框架仍然与今天的浏览器支持有很大差异。

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

推荐阅读