Gmail 弄乱了我的电子邮件字体答案

【问题标题】：Gmail messes up my email fontsGmail 弄乱了我的电子邮件字体
【发布时间】：2011-06-30 21:40:20
【问题描述】：

我正在通过 php/html 向 gmail 地址发送电子邮件。电子邮件在 Outlook 和其他客户端中显示正常，但是当我使用 gmail 的 Web 界面时，字体无法正确显示。例如，我有这个：

<html><body link="#00CCFF" vlink="#000000" alink="#000000">
<table width="100%">
<tr align="left" style="color:#000000"; height="25px"><td>Col0</td><td>Col1</td><td>Col2</td><td>Col3</td><td>Col4</td></tr>
<tr align="left" style="color:#00CCFF; font-size:9px;"><td><a href="http://www.example.com">click</a></td><td colspan="4">row1</td></tr>
<tr align="left" style="color:#00CCFF; font-size:9px;"><td><a href="http://www.example.com">click</a></td><td colspan="4">row2</td></tr>
</table>
</body></html>

Gmail 将我的超链接颜色更改为默认蓝色。在我的表格行中，颜色显示正确，但字体更大（看起来 gmail 将其更改为标准大小）

谢谢！

【问题讨论】：

不知道，但我已经重新平衡了。
致所有投票支持超级用户的人：这是一个 HTML/CSS-in-email 问题，属于 StackOverflow 领域。
我们如何让它回到stackoverflow？很烦人！
你能把你的实际代码放在问题中吗？其他 HTML 邮件显示正常，因此您的 HTML 中可能有问题。（可能GMail比其他客户端更严格）
我已将这两个问题都标记为供版主注意，所以事情应该有所进展。但是，如果您不包含代码，那么人们很容易犯错误。

标签： html css email gmail

【解决方案1】：

Here 是最流行的基于 Web/桌面的电子邮件阅读器的 CSS 功能的有趣且更新的列表。先看看吧，这是一个好的开始。

另一方面，考虑到GMail 实际上是一个网页，所以很明显并且预期不会使用body attrs。考虑寻找基于 CSS 的解决方案。

如果您想确保 attr 位于最终源代码中，请使用 FireBug 查看 Web 客户端中使用的最终 HTML。没有比这更好的策略了，因为您正在查看 HTML 过滤器为浏览器提供的确切内容。

祝你好运！

【讨论】：

【解决方案2】：

遇到同样的问题。代替 px 使用 pt 中的字体大小，它对我有用。

【讨论】：

使用em 代替pt 可能会更好，以允许文本在平板电脑和手机上缩放。

【解决方案3】：

您已将链接的 CSS 放在正文标记中，Gmail 将删除该标记，因为正文标记已由 Gmail 界面围绕您的电子邮件创建。您唯一的解决方案是在 <a> 标记中使用内联 CSS，如下所示：

<a href="#" style="color: #123456;">text</a>

很遗憾，您无法通过内联 CSS 设置活动链接和已访问链接的样式。

【讨论】：

【解决方案4】：

目前，Gmail 似乎不支持<style> 标签或link/visited/active/hover CSS 链接状态选择器。

但是，您可以尝试使用 JavaScript 模拟这种行为：

使用onMouseOut 事件结合style="color:#XXX;" 模拟a:link。
用onMouseOver模拟a:hover 事件。
使用onMouseDown 事件模拟a:active。

例如：

<a href="http://www.example.com"
   style="color:#00CCFF;" onMouseOut="this.style.color='#00CCFF'"
   onMouseOver="this.style.color='#FFFF00'"
   onMouseDown="this.style.color='#FF0000'">click</a>

您可能可以使用click 事件来设置“已访问”样式，但它会在页面重新加载时重置，并且您需要（暂时）保持它 - 可能通过替换 onMouseOut 事件处理程序的style.color 值。

我没有在 Gmail 中尝试过此代码，我将把它留给你 :)

【讨论】：