How do I stop Yahoo displaying serif fonts in HTML emails when I've specified sans-serif?_问答_开发者

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

开发者 https://www.devze.com 2023-03-23 19:46 出处：网络

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 Hotm

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 t开发者_如何学JAVAhere who know how to resolve this issue?

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.

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!

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?