Gmail messes up my email fonts_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-12 00:39 出处：网络

I am sending an email via php/html to a gmail address. The email displays fine in outlook & other clients but when I use the web interface of gmail, the fonts don\'t display correctly. For instanc

相关专题：css email gmail

I am sending an email via php/html to a gmail address. The email displays fine in outlook & other clients but when I use the web interface of gmail, the fonts don't display correctly. For instance, I have this:

<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>
<开发者_如何学JAVA;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 changes the color of my hyperlinks to their default blue. In my table row, the color displays correctly but the font size is bigger (looks like gmail changed it to a standard size)

thx!

Here's an interesting and updated list of CSS capabilities of the most popular web/desk based email readers. Check it out first, it's a good start.

On the other hand, consider that GMail is actually a web page, so it's obvious and expected that body attrs will not be used. Consider looking for a CSS based solution.

If you want to make sure that the attr is into the final source, use FireBug to see the final HTML used in the web client. There's not any better strategy, because you're watching exactly what the HTML filter gives to the browser.

Good luck!

You've put your CSS for the links in the body tag, which Gmail will strip because the body tag is already created by the Gmail interface around your email. Your only solution is to use inline CSS in the <a> tag, like this:

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

Unfortunately, you cannot style active and visited links via inline CSS.

At present, it seems that Gmail doesn't support <style> tags or link/visited/active/hover CSS link-state selectors.

However, you can try to simulate this behavior with JavaScript:

simulate a:link with the onMouseOut event in combination with style="color:#XXX;".
simulate a:hover with the onMouseOver event.
simulate a:active with the onMouseDown event.

e.g.:

<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>

You can probably use the click event to set a "visited" style, but it'll reset when the page reloads, and you'll need to persist it (temporarily) - possibly by replacing the onMouseOut event handler's style.color value.

I haven't tried this code in Gmail, I'll leave that to you :)

Having the same problem. Instead of px use the font-size in pt, it worked for me.