Gmail 应用 HTML 签名字体大小和行高问题



我正在尝试为我们公司创建一个新的HTML签名,但我似乎无法在Gmaill应用程序(在我的测试用例中为Android(上很好地工作。字体大小和行高都会更改。我尝试了不同的东西,甚至删除了整个 HTML 签名,并尝试用几行来测试一个新的签名,但不幸的是我无法让它工作。我尝试了很多东西,以至于我不再知道如何解决。我也试图搜索问题,但我似乎仍然无法让它工作。请参阅随附的代码。

如果有人能帮助我走向正确的方向,那就太好了。我还附上了屏幕截图,以显示我对Gmail应用程序的意思。如您所见,文本大小也不同。

https://i.stack.imgur.com/0NrYq.jpg

https://i.stack.imgur.com/NR9Xy.jpg

提前感谢!

<html>
<head>
<meta charset="utf-8">
<title>html signature</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {margin: 0px; padding: 0px; }
img { border: 0px; }
a { color: #00002E; text-decoration: none; }
h1.title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 5px; }
span.function { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
#wrapper { width: 100%; max-width: 470px; }
#border { border-left: 1px solid #00002E; }
table.functiondetails { width: 100%; margin-top: 5px; }
table.functiondetails tr { height: 30px; }
table.functiondetails tr td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15px; color: #00002E; }
table.functiondetails tr td.icon { width: 10%; }
table.functiondetails tr td.detail { width: 90%; }

@media screen and (max-width: 768px) {
#wrapper { width: 90%; }
#logoColumn { width: 30%; max-width: 30%; }
#logoColumn img { width: 100%; }
#functionColumn { width: 70%; max-width: 70%; }
}
@media screen and (max-width: 470px) {
#wrapper{ width: 100%; }
}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table id="wrapper" cellpadding="0" cellspacing="0">
<tr>
<td id="logoColumn">
logo
</td>
<td id="border"></td>
<td id="functionColumn">
<h1 class="title">Name of employee</h1>
<span class="function">Function | Company</span>
<table class="functiondetails" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-phone.jpg" alt="Bel ons" width="13" height="13"></td>
<td class="detail"><a href="tel:+31612345678" target="_blank">+31 (0)6 - 12345678</a><br><a href="tel:+31162123456" target="_blank">+31 (0)162 -123456</a></td>             
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-email.jpg" alt="Mail ons" width="13" height="13"></td>
<td class="detail"><a href="mailto:n.vermeer@mvhmedia.nl" target="_blank">email@domain.nl</a></td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-location.jpg" alt="Adresgegevens" width="13" height="13"></td>
<td class="detail">Address line 1<br>Address line 2</td>
</tr>
<tr>
<td class="icon"><img src="https://www.mvhmedia.nl/email/handtekening/icon-arrow.jpg" alt="Website" width="13" height="13"></td>
<td class="detail"><a href="https://www.mvhmedia.nl" target="_blank">domain.nl</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

[1]: https://i.stack.imgur.com/0NrYq.jpg

活动监视器可以告诉您有关不同电子邮件平台支持哪些CSS属性的大量信息。在那里,它提到字体大小和行高几乎普遍支持。但它说头部或身体中的样式标签并不完全受支持,并且对链接CSS的支持非常低。因此,最好的选择是尝试内联样式。

https://www.campaignmonitor.com/css/text-fonts/line-height/

但是,仅使用内联样式的一个缺点是不能使用媒体查询。因此,您仍然可以将媒体查询保留在样式标记中,但它们不会被每个平台使用。

最新更新