当我指定了无衬线字体时，如何阻止雅虎在 HTML 电子邮件中显示衬线字体？

发布于 2024-11-26 23:19:43 字数 607 浏览 0 评论 0原文

我已经整理了一封 HTML 电子邮件。我们这里的一些人知道如何很好地做到这一点（表格、内联样式等），并且它可以在多个浏览器以及 Outlook、Google 和 Hotmail 中完美显示。

然而，雅虎则是另一回事。当我们指定无衬线字体时，所有文本都以衬线字体显示。下面是一个代码片段，作为如何完成的示例：

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

我们尝试使用

标签代替并在其中设置样式，还尝试了但这些似乎都不起作用。

有没有人有类似的经历和/或更重要的是，是否有 HTML 电子邮件专家知道如何解决此问题？

原文

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 <p> tags instead and styling inside that, also tried <font face="arial, sans-serif"> 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岛徒 2024-12-03 23:19:43

首先要查看的是雅虎向您的网络浏览器提供的 HTML。如果他们真的修改了 HTML，你就会得到答案。

否则，它可能是在自己的样式表中定义为“!important”的 CSS 规则。如果是这种情况，那么 font-family:sans-serif !important 可以解决您的问题。

回复收藏 0 原文

岁月无声 2024-12-03 23:19:43

事实证明，雅虎邮件的字体表现似乎很奇怪。根据我的经验（以及最近的测试），似乎您只需要使用标记的 face 属性和仅 em>不在内联样式中使用font-family。

例如，以下代码在 Yahoo 中生成带有衬线的文本：

Text

但下一个示例可以正常工作，根据需要修改字体

Text

后者在 Gmail、Hotmail 和 Outlook 2010（以及可能的其他内容，这些只是我测试过的）中也是一致的，

祝你好运！

回复收藏 0 原文

画尸师 2024-12-03 23:19:43

我刚刚通过雅虎运行了您的示例：

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

并且它呈现无衬线...唯一不正确的是 TD 宽度属性上的“px”。

也许您的代码中有一些严重错误导致了此问题？

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?

回复收藏 0 原文

~没有更多了~