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

Question

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

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

事实是，我的电子邮件似乎默认将属性 700 应用到所有页面，如果我将 css [=23] 放入内联，则找不到 300 =] 到 300。但是文中好像是加了300的权重，不知道为什么，也不知道是什么逻辑，想什么时候加一个轻的权重。

有谁知道如何在电子邮件的同一页面中使用 Open Sans 粗体和浅色 html？

这是代码笔：

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

Answer 1

您可以为标题和内容使用不同的 font-weight 参考片段

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>

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

Is that possible to use several weight of a web font in a email html ? (or 2 different fonts ?)

html

css

fonts

html-email

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

Is that possible to use several weight of a web font in a email html ? (or 2 different fonts ?)

html

css

fonts

html-email

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