css - 时事通讯 HTML : fonts and vertical align

Question

我正在创建一个 HTML 时事通讯。我正在使用嵌套数组。我有两个问题:如何导入字体？因为 @import 和 @font-face 不在我的时事通讯上工作(但在简单的 html 上工作)

第二个是这样的:

如何“vertical align middle”2 跨越不同的字体大小？它适用于简单的 html，但不适用于时事通讯......

<table width="100%" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding:10px;">
        <div>                      
            <!--[if mso]>
                                          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:60px;v-text-anchor:middle;width:180px;" arcsize="17%" stroke="f" fillcolor="#00436f">
                                            <w:anchorlock/>
                                            <center>
                                          <![endif]-->
                          <a href="#"
                                            style="background-color:#00436f;font-weight:bold;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;padding-top: 25px; padding-bottom: 25px;">                                                                                                            <span style="font-size:2em;font-weight:bold;vertical-align:middle">15</span>&nbsp;
                                          <span style="font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle">Février</span>
                                            </a>
                              <!--[if mso]>
                                        </center>
                                      </v:roundrect>
                                    <![endif]-->
              </div>
        <!--<p style="Margin: 0;font-size: 14px;line-height: 17px;width: 100%;padding: 25px 0;text-align: center;border-radius: 10px;background: #00436f;-->
        <!--      color: white;">-->
        <!--</p>-->
        <p style="padding-top:10px;Margin: 0;line-height:1;font-size: 1em;font-weight:bold;color:#797979">Réunion d'information Loiret Numérique</p>
        <p style="Margin: 0;font-size: 12px;line-height: 14px">
          Mairie de Montargis - Salle Montdignan
        </p>
      </td>
    </tr>
  </tbody>
</table>

我得到的:

我需要什么:

我的字体:

@media screen{
@import url("https://use.typekit.net/jqe0zpu.css");
@import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");

@font-face {
  font-family: 'Walsheim';
  font-weight: normal;
  font-style: normal;
  src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Regular.eot');

}

@font-face {
  font-family: 'Walsheim';
  src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Bold.eot');
  src: url('https://www.site.fr/.../GT-Walsheim-Bold.ttf') format('truetype'),
    url('https://www.site.fr/.../GT-Walsheim-Bold.woff') format('woff'),
    url('https://www.site.fr/.../GT-Walsheim-Bold.woff2') format('woff2'),
    url('https://www.site.fr/.../GT-Walsheim-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: 800;
  font-style: normal;
}       
    }

Answer 1

正如我在评论中提到的，Outlook 不适用于 Google 字体等所有网络字体。您没有包含资源的完整路径，因此我们无法测试您在做什么并寻找解决方案。

我的第一个建议是在网络浏览器中打开您的电子邮件并测试它是否有效。如果是这样，那么我建议测试您在 Apple 或 IOS 电子邮件客户端中所做的事情，因为它们似乎可以很好地处理网络字体。如果它有效，您就知道您的代码正确无误。

通常，带有 Web 字体的 HTML 文档需要指向该字体的链接，并应用到类中以便在文档中使用。

你应该有一个这样的链接:

<style>
  @import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
</style>

或者这个:

<link href="https://use.typekit.net/jqe0zpu.css" rel="stylesheet">

接下来，您需要找到一些方法将字体输出到文档中。

<style>
.classname { 
  font-family: GT-Walsheim, Arial, sans-serif;
}
</style>

在最后一个示例中，我添加了 Arial 作为后备字体，该字体非常适合网络安全，因为 Walsheim 不适用于 Gmail，而且很可能不适用于 Outlook 2007、2010、2013-2019。

最后，应用类名:

<p class="classname">Hello</p>

您也可以花点心思添加内联样式:

<p class="classname" style="font-family: GT-Walsheim, Arial, sans-serif;">Hello</p>

这是关于如何在电子邮件中使用网络字体的非常基本的计划。

祝你好运。