HTML 电子邮件 : make fonts lighter

Question

我想使图像中显示的字体更亮。

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="background-image: url(http://www.hubilo.com/eventApp/ws/images/event/cover/facebook/thumb/2712_1467715620.jpg); background-repeat: no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width: 100%; ">
  <tbody>

    <tr>
      <td valign="top" align="center" height="80"></td>
    </tr>

    <tr>
      <td class="h2" valign="top" align="center" style="color: white; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 12px; font-size: 32px; ">
        <p>TIECON</p>
      </td>
    </tr>


  </tbody>

</table>

经过我的努力，我在代码片段中得到了不同的结果。

谢谢。

Answer 1

您可以使用 Google fonts API .

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v5/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
}
#lightfont {
  font-family: 'open sans', arial, sans-serif;
}

<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet">

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="background-image: url(http://www.hubilo.com/eventApp/ws/images/event/cover/facebook/thumb/2712_1467715620.jpg); background-repeat: no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width: 100%; ">
  <tbody>

    <tr>
      <td valign="top" align="center" height="80"></td>
    </tr>

    <tr>
      <td class="h2" valign="top" align="center" style="color: white; text-align: center; text-transform: uppercase; font-weight:100 !important; letter-spacing: 12px; font-size: 32px; ">
        <p id="lightfont">TIECON</p>
      </td>
    </tr>


  </tbody>

</table>