在HTML电子邮件模板中使用Web字体的困难

我正在设计一些HTML电子邮件模板的工作，并有不同的结果，而试图纳入网页字体

我一直在使用Outlook、Gmail和Yahoo Mail测试我的模板。Outlook和Gmail似乎在网络上显示字体，而不是在手机上。雅虎似乎忽视了两者的字体。当我使用font-weight属性时，这三个属性似乎都忽略了

作为参考，我正在尝试使用Josefin Sans和Lato Google字体

下面是我用来获取字体的方法：

这是我尝试使用字体和所需字体重量的一个示例：

测试拉托字体

我想知道这是我做错了什么，还是电子邮件客户端对CSS的限制？如果后者有任何工作需要考虑的话，

< P>，Web字体只会在苹果邮件、Mac Outlook上、iOS、三星应用程序和其他一些版本的Outlook上工作。Outlook应用程序和Outlook.com可能在某些时候进行了更新，以添加支持

我会在那里抓取href，在浏览器中转到它，然后只复制@font face拉丁部分。对@font-face的支持比链接更好，而且，您需要针对Windows上的Outlook进行调整。（或者，从这个角度看，link或@import方法也需要@font-face，因此也没有必要通过添加它们来使事情复杂化。）

以下是您将得到的结果：

<style>
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPGQ.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;
mso-font-alt: Arial;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.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;
mso-font-alt: Arial;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ.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;
mso-font-alt: Arial;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwiPGQ.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;
mso-font-alt: Arial;
}
</style>

/*拉丁语*/
@字体{
字体系列：“Lato”；
字体风格：普通；
字体大小：300；
字体显示：交换；
src:url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USSwiPGQ.woff2)格式（'woff2'）；
unicode范围：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；
mso字体alt:Arial；
}
/*拉丁语*/
@字体{
字体系列：“Lato”；
字体风格：普通；
字体大小：400；
字体显示：交换；
src:url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2)格式（'woff2'）；
unicode范围：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；
mso字体alt:Arial；
}
/*拉丁语*/
@字体{
字体系列：“Lato”；
字体风格：普通；
字号：700；
字体显示：交换；
src:url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh6UVSwiPGQ.woff2)格式（'woff2'）；
unicode范围：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；
mso字体alt:Arial；
}
/*拉丁语*/
@字体{
字体系列：“Lato”；
字体风格：普通；
字号：900；
字体显示：交换；
src:url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwiPGQ.woff2)格式（'woff2'）；
unicode范围：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；
mso字体alt:Arial；
}

注意

mso字体alt:Arial在每个声明中-这样Outlook for Windows就不会默认为Times New Roman（它不支持web字体）

现在，谷歌只支持谷歌Sans和Roboto字体，所以你可能想在你的字体家族中做到这一点：
字体家族：'Lato'，Roboto，Arial，Sans serif；字体大小：300

始终确保列表中有websafe字体（例如Arial）。这是一种几乎所有人都已经安装过的字体。而无衬线是为那些0.1%甚至没有衬线的人设计的，但是你不希望它像泰晤士报新罗马版那样默认为衬线