HTML 电子邮件：Outlook 中的粗体字重不起作用答案

【问题标题】：HTML email: font-weight bold in Outlook is not workingHTML 电子邮件：Outlook 中的粗体字重不起作用
【发布时间】：2018-05-16 08:29:57
【问题描述】：

更新。我已经尝试了所有建议。但仍然无法让 Outlook 显示为粗体！

更新 2。请参阅下面的解决方案

我正在创建 HTML 电子邮件通讯。 <h1> 是粗体，但是当我在 Outlook（2007、2010、2013 等）中测试时，字体似乎不是粗体。 Outlook 正在对常规重量应用人造粗体（增肥），或忽略粗体。而所有其他电子邮件客户端都使用真正的粗体字重。

有什么我可以做的吗？当然标题<h1> 应该默认为粗体，而无需编写css 或在其周围放置<strong> 或<b>？

这是我的代码（内联）：

h1 {
font-family:Arial Bold, Arial, sans-serif;
font-weight:bold;
}

也许我需要将 Arial Bold 放在引号中？

font-family:'Arial Bold', Arial, sans-serif;

这里有两张图片。顶部是它的外观。底部是 Outlook。

【问题讨论】：

我检查了内联代码，内联工具自动将 Arial Bold 放在引号中：“Arial Bold”
您是否指定字体大小？
是的，我正在指定字体大小等。我只是不想用所有代码弄乱我的帖子。
尝试添加 font-weight:900 并将 Arial Bold 包裹在 cmets 中

标签： html outlook html-email

【解决方案1】：

不幸的是，在混合使用 Arial Bold 的情况下，并没有一种出色、可靠的方法来做到这一点。

并非每个系统都安装 Arial Bold，因此font-family:Arial Bold, Arial, sans-serif; 的字体堆栈将跳过 Arial Bold 并改用 Arial。即使您下载 Arial Bold 的副本并将其作为 Web 字体发送，Outlook 也不支持 Web 字体。

因此，在没有安装 Arial Bold 的系统上，我们只能使用常规的 Arial。我们可以伪造粗体 Arial：

<h1 style="font-family: Arial Bold, Arial, sans-serif; font-weight: bold;">Headline Text</h1>

这可能没问题，但是在字体堆栈中使用 Arial Bold 仍然有点不确定。在确实安装了 Arial Bold 的系统上，我们将看到 Arial Bold 呈现...和人造粗体。

我不确定什么最适合您的项目，但如果是我，我会从字体堆栈中删除 Arial Bold，只使用仿粗体常规 Arial。每个系统都有 Arial，因此更容易预测。

<h1 style="font-family: Arial, sans-serif; font-weight: bold;">Headline Text</h1>

【讨论】：

我了解 Arial Bold 不是网络安全字体。我假设 Arial 有四种样式：常规、斜体、粗体和粗斜体，因此指定 Arial Bold 会选择字体的 Arial 粗体？还是使用 Microsoft Word 显示电子邮件的 Outlook 版本只是简单地伪造粗体（使用 Arial 真正的粗体还不够复杂）？真是一团糟！
真是一团糟 :) 我相信 Arial 和 Arial Bold 是两种不同的字体，所以加粗的 Arial 不使用 Arial Bold。跨度>
谢谢。我将从字体堆栈中删除“Arial Bold”。我没有进行广泛的测试，但据我所知，它没有任何区别，所以它可能不存在。

【解决方案2】：

你可以使用<strong>标签代替css。

【讨论】：

【解决方案3】：

你也可以试试这个标记：<h1><b>CASE STUDY</b></h1>

【讨论】：

谢谢。我会试试的。我很惊讶在 Outlook 中默认情况下标题不会自动加粗。
今天晚些时候我会测试它并回来

【解决方案4】：

正如@Ted Goas 所指出的，Arial Bold 不是网络安全字体。在过去，它也不是 IOS 的一部分。我的建议是使用带有font-weight: 800; 的Arial。它与 Arial Bold 不太一样，但它是一个不错的后备。

https://jsfiddle.net/wallyglenn/aez4e3gd/

如果这是您只在 Outlook 中发现的问题，并且希望将 Arial Bold 保留为其他客户端的字体，请在 <head>:

<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
  h1 {font-family: Arial, sans-serif !important; font-weight: 800;}
</style>
<![endif]-->

您可以这样做来微调您发现的有关 Outlook 样式的任何问题。

祝你好运。

【讨论】：

不会将 font-weight:900 映射到重量级的 Arial。由于没有 Arial Heavy 重量，它会映射到 Arial Bold 重量（字体重量：700）？
@Markeee 我错了。 font-weight:800; 是 Arial 的最大值。没有 700。在最大字体粗细下，它看起来不太像 Arial Black，但它是一个很好的近似值。我会更新我的答案。
@Markee Ariel 的字体粗细不是 900。
你好，格瓦利。 Arial 字体有四个切口。常规 (400) 斜体 (400 斜体) 粗体 (700) 粗体斜体 (700 斜体)。请参阅链接。粗体匹配字体粗细 700。developer.mozilla.org/en-US/docs/Web/CSS/font-weight

【解决方案5】：

问题在于使用 Microsoft Word 显示电子邮件的 Outlook 版本。我相信这些版本的 Outlook / Word 不够复杂，无法使用真正的粗体字体。相反，他们使用假/人造粗体 - 只是使常规重量的字母变胖。这就是为什么它们看起来比真正的粗体字体不同、“更轻”和更丑。

斜体也一样。旧版本的 Outlook / Word 只是倾斜了常规的罗马字体 - 他们不使用字体的斜体（一些糟糕的印刷师已经花费了数月或数年的时间来设计）。

【讨论】：