Question

我正在创建HTML新闻稿。我正在使用嵌套数组。我有两个问题：如何导入字体？因为 @import 和 @ font-face 不适用于我的新闻通讯（但适用于简单的html）

第二个是：

我如何“ 垂直居中对齐” 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字体配合使用。如果可行，您知道您已正确编写了代码。

通常，具有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>

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

祝你好运。

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>

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

2 个答案: