How do I stop Yahoo displaying serif fonts in HTML emails when I've specified sans-serif?

问题

I've put together an HTML email. Together, a few of us here know how to do this pretty well (tables, inline styles, etc.) and it displays perfectly on multiple browsers and in Outlook, Google and Hotmail.

However, Yahoo is another matter. All of the text is displaying in a serif font when we have specified sans-serif. Here's a snippet of code as an example of how it's been done:

<tr>
  <td colspan="2" width="600px" style="padding: 15px 0 15px 0; font-family:arial,sans-serif; font-size:40px; color:#0066cc;">
    Some text in here
  </td>
</tr>

We've tried using  tags instead and styling inside that, also tried  but neither of these seem to work.

Has anyone had a similar experience and/or, more importantly, are there any HTML email gurus out there who know how to resolve this issue?

回答1:

The first thing to look at is the HTML that Yahoo gives to your web browser. If they actually modified the HTML have your answer.

Otherwise, it could be a CSS rule which was defined as "!important" in their own stylesheet. If this is the case, then font-family:sans-serif !important could solve your issue.

回答2:

It turns out that Yahoo mail seems to act really strangely with font faces. In my experience (and a recent test) it seems like you need to only use the face attribute of the  tag and not use font-family within the inline style.

For example, the following code yields text with serifs in Yahoo:

Text

But the next example works correctly, modifying the font face as desired

Text

The latter is also consistent across Gmail, Hotmail, and Outlook 2010 (and likely others, those are just the ones that I tested)

Good luck!

回答3:

I just ran your example through Yahoo:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
    </head>
  <body>
    <table>
      <tr>
        <td colspan="2" width="600px" style="padding: 15px 0 15px 0; font-family:arial,sans-serif; font-size:40px; color:#0066cc;">
      Some text in here
        </td>
      </tr>
    </table>
  </body>
  </html>

And it's rendering sans serif... the only thing that is incorrect is the "px" on the width attribute of the TD.

Maybe you have some critical errors in your code that is causing this issue?

来源：https://stackoverflow.com/questions/6862388/how-do-i-stop-yahoo-displaying-serif-fonts-in-html-emails-when-ive-specified-sa

标签

html

fonts

yahoo