是否可以在电子邮件 html 中使用多种重量的网络字体？ （或2种不同的字体？）

Question

我正在使用内联 css 在 html 上构建电子邮件。我需要使用谷歌字体 Open Sans 构建它，并使用 font-weight:300 的浅色字体和 font-weight: 700 的粗体字体作为标题。 我在 googlefont 网站上定制了具有我需要的两个特殊性的网址：

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,700" rel="stylesheet">

事实上，我的电子邮件似乎默认将属性 700 应用于所有页面，如果我将内联 css 的字体粗细设置为 300，则找不到 300 的。 然而，300 重量似乎应用在文本中，但我不知道为什么或理解可以帮助我随时应用轻重量的逻辑。

有谁知道我是否可以在电子邮件 html 的同一页面中使用 Open Sans 粗体和浅色？

这里是代码笔：

https://codepen.io/Katchou/pen/zzzLOy

Answer 1

您可以为标题和内容使用不同的字体粗细 参考sn-p

h3{
  font-family:'Open-sans', sans-serif;
  font-weight: 700;
}

p{
  font-family:'Open-sans', sans-serif;
  font-weight: 300;
}

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<span>
  <h3>Heading</h3>
  <p>Content</p>
 </span>

或者你可以使用

<span>
  <h3 style="font-family:'Open-sans', sans-serif;font-weight:700">Heading</h3>
  <p style="font-family:'Open-sans', sans-serif;font-weight:300">Content</p>
 </span>

Answer 2

这是怎么回事？如果您在问题中添加更多信息，我可以完善我的答案。

编辑：
您添加了 CodePen。
我将您的标题显示为 Open Sans Light。
一探究竟！
https://codepen.io/rickydam/pen/QggBja

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>
  @font-face {
     font-family: 'Open Sans Light';
     src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
  }
</style>

<span>
  <font face="Open Sans">
  Hello world
  </font>
  <br>
  <font face="Open Sans Light">
  Hello world
  </font>
  <br>
  <font face="Open Sans" style="font-weight:700">
  Hello world
  </font>
 </span>