css - 如何将字体系列样式添加到 Html 电子邮件模板
问题描述
嘿,我在将字体样式添加到我的确认模板时遇到问题,我在订单完成后发送给我的客户电子邮件。我知道内联 css 可以很好地与 html 电子邮件模板一起使用,但我正在尝试从 google 添加 Heebo font-family,我可以将它加载到在 gmail 和 hotmail 上不起作用的 head 标签中。
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"></head>
现在这是我的头。但正如我所说,它在 gmail 或 hotmail 中不起作用。
解决方案
我以这种方式包含它。你可以从谷歌网络字体中得到这个。这适用于 Outlook (IOS)、Apple Mail、iPad、iPhone。其余的不支持网络字体。所以你应该有一个默认的后备字体。
理想情况下,您的电子邮件应该是基于实时文本/图像的混合体。
现在 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;
}
}
推荐阅读
- wordpress - 在 for 循环中对内部调用的相同响应
- json - jq:替换特定条目上的字符串
- firebase-realtime-database - Firebase 实时数据库 - 使用基于查询的规则检索特定数据
- javascript - 单击时向元素添加 CSS 类,出现错误?
- react-native - react-native-webview:如何为加载的网站设置初始比例
- android - Ionic FilePath 不起作用,如何获取 Android 11 的文件路径
- javascript - 试图找到一种方法来为 Discord 机器人获取今天版本的 PogChamp 表情
- c# - 使用 DisplayMemberBinding 在 XAML gridview 中设置不同的属性
- ubuntu - tesseract 4 为什么我的训练数据没有编译
- javascript - 有没有办法在不使用道具的情况下更新反应组件?