HTML 电子邮件中的字体颜色 - Gmail

Question

我知道我必须使用内联 CSS 来设置 HTML 电子邮件中任何内容的样式，但我注意到 gmail 中发生了奇怪的覆盖。我正在尝试更改表格行中文本的颜色：

<tr style='color: #000; font-size: 14px; font-family: Verdana, serif;'>

但是当我在 gmail 中打开这封电子邮件时，字体系列和黑色被 gmail 样式覆盖。我通过 Firebug 看到了这个：

正在使用紫色而不是我想要的黑色，并且字体系列默认为 arial，sans-serif。有谁知道一种方法可以安全地覆盖 gmail 强加给我的样式？

更新

我将颜色更改为非黑色，即 #212a2c 并且颜色更改正确，但字体系列仍然停留在 arial 上。

Answer 1

看起来你正在设计 TR，但 gmail 却以 TD 的风格超越了它。当 TD 和 TR 发生冲突时，TD 将获胜，因为它是最直接的容器……根据 css3 规则最接近的匹配。我认为如果你在 TD 上使用内联样式，你将能够超越它。

Answer 2

GMail 会将您的链接从黑色 (#000000) 更改为默认的蓝色，大概是作为反垃圾邮件功能。

要解决此问题，只需将字体颜色更改为（#000001），例如

<a href="#" style="color: #000001;">Click HERE</a>

Answer 3

根据经验，我发现使用颜色代码最安全的方法始终是使用 6 位数代码 - 我曾经遇到过类似的问题，只需将颜色代码从 3 位数更改为 6 即可解决 - 不需要毕竟随时可以输入 3 个额外的数字:)

Answer 4

1. 不要在

   <tr>

   上使用样式，请在

   <td>

   或文本周围的

   <span>

   上使用样式。
2. 无论你写#000、#000000还是黑色作为颜色都没关系:)

Answer 5

“无论您写#000、#000000还是黑色作为颜色都没有关系:)”

是的，有时电子邮件会以稍微不同的方式呈现 3 个十六进制颜色。根据经验，为了兼容性，最好坚持使用 6。

Answer 6

我遇到了同样的问题，我通过尝试为文本提供渐变但保持两种颜色相同来解决此问题。这对我有用。

.gradient-text {
        background-image: linear-gradient(#ffffff, #ffffff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
    }

另外，请记住一些电子邮件服务提供商（例如 Gmail）会删除模板的头部并在此处提到StackOverflow 线程，所以我尝试将样式标签放入正文标签中，它起作用了