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

我正在制作一份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>

---

下面是一种使用

div

标记的简单方法：

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans'）；
#发烧的{
背景：#00436f；
边界半径：10px；
字体大小：粗体；
颜色：#ffffff；
显示：内联块；
字体系列：无衬线；
文本对齐：居中；
文字装饰：无；
宽度：180px；
字体大小：16px；
字体大小：粗体；
文本转换：大写；
垂直对齐：中间-webkit文本大小调整：无；
填充顶部：25px；
垫底：25px；
}
#费弗里埃文本{
字体大小：12px；
字体大小：粗体；
文本转换：大写；
}
15 FÉVRIER

正如我在评论中提到的，Outlook不能与谷歌字体等所有web字体一起使用。您没有包含资源的完整路径，因此我们无法测试您正在做什么并寻找解决方案

我的第一个建议是在网络浏览器中打开你的电子邮件并测试它是否有效。如果是这样的话，我建议您在苹果或IOS电子邮件客户端上测试一下，因为它们似乎可以很好地处理web字体。如果它起作用，你就知道你的代码是正确的

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

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

你应该有这样一个链接：

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

@导入url（“https://www.site.fr/.../GT-Walsheim-Regular.ttf");

或者这个：

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

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

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

.classname{
字体系列：GT Walsheim，Arial，无衬线；
}

在上一个例子中，我添加了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字体的非常基本的计划

---

祝你好运。

你说的

@font-face

不起作用是什么意思？据我所知，时事通讯的设计与“普通”页面的设计是一样的。这是一个很好的指南，告诉你在电子邮件中可以使用什么样的css，不能使用什么样的css。这表明字体支持很多邮件客户机对html/css的支持非常有限。您希望支持哪些版本的outlook，是否还希望支持其他邮件客户端？如果是，哪些字体？我的字体被客户端忽略（我的主要客户端是Outlook 2010）@Pete我看到了这一点，我根据这一点修改了一些代码。但我的问题仍然是在这里发布关于样式表的代码，以及如何导入字体。请记住，Outlook和Gmail不能与基于web的字体（如Google字体）一起使用。Outlook将默认为

Times New Roman

，因为您将衬线字体显示为输出，我认为这是问题所在。这不是我想要的，您的代码以相同的字体大小显示日期，我需要2个垂直对齐的不同字体大小（如我的图像所示）分别用16px和12px替换css如果您要回答问题，您必须在此处发布标记，而不是第三方网站。很抱歉，上面粘贴了我的代码，您可以检查或编辑它并在codepen上运行。。这只是将“字体大小：1em；”更改为“字体大小：12px；”，将“字体大小：1.2em；”更改为“字体大小：16px；”的问题。。第三方“代码笔”允许您测试。。密码。因此，请查找上面的代码，所需的更改在此注释中。您可以将15 FÉVRIER放在表中。。它将呈现相同的结果。谢谢为什么字体不起作用？我需要我的字体是这个…@ProjetSin字体不工作，因为Gmail和Outlook不支持web字体。我知道这听起来很可笑，但Gmail不支持Gmail中的谷歌字体。这就是为什么我鼓励你选择像Arial这样的网络安全字体作为备份。好的，谢谢。如果它不支持Webfont，为什么除了我之外，其他人都能做到这一点：'）？因为下面的答案似乎对其他人有用