时事通讯 HTML：字体和垂直对齐

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>

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

祝你好运。

Answer 2

这里有一个更简单的使用div标签的方法：

<style>
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  #fevrier {
    background: #00436f;
    border-radius: 10px;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    font-family: sans-serif;
    text-align: center;
    text-decoration: none;
    width: 180px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle -webkit-text-size-adjust:none;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  
  #fevrier .text {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
  }
</style>


<div id="fevrier">
  15 <span class="text">FÉVRIER </span>
</div>