我正在使用一个邮件模板,我想通过gmail使用它,但我在CanIMail网站上看到了"import":
@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">
不兼容,这是一个大问题,因为我有一个引导程序图标不会显示在邮件接收器上,他也看不到我需要的谷歌字体。
有什么办法可以克服这个问题吗?
不幸的是,Gmail也不支持自定义字体的@font-face
:https://www.caniemail.com/features/css-at-font-face/即使将要使用的CSS与@import
或link
标记内联,也不会使用字体(和图标字体(。
如果你有其他一切,一个选择是保留谷歌字体中的字体,但为Gmail等无法使用的客户端设置一些备用字体。例如:
font-family: Poppins, Avenir Next, Futura, Verdana, sans-serif;
根据你想要做的事情,Bootstrap可能也不会像你预期的那样工作——有一些类似的框架是专门为兼容电子邮件客户端而编写的,因为像Gmail这样的框架仍然与当今浏览器所支持的有很大的差异。
如果你只使用少量的图标,你可能会更好地将这些特定的图标转换为PNG图像。