堆栈中特定字体的样式？答案

【问题标题】：Styles for specific font in a stack?堆栈中特定字体的样式？
【发布时间】：2017-06-28 16:05:28
【问题描述】：

假设我有一个字体堆栈，例如font: normal 16px/24px HelveticaNeue-CondensedBold, Arial, san-serif;

在 CSS 中是否有任何方法可以使用特定样式来定位回退 Arial 字体，例如，如果我只想将 Arial 加粗？

我觉得在[style*="Arial"] 领域使用一些东西会是一个起点，但这仍然会针对堆栈中的所有字体，对吧？

提前致谢！

【问题讨论】：

标签： html css fonts html-email fallback

【解决方案1】：

如果您将基本正文字体设置为 Arial 粗体，它将成为大多数电子邮件客户端的后备字体，但 Outlook 除外，后者的后备字体实际上是 Times New Roman。

body { 
  font-family: Arial !important;
  font-weight: bold;
}

table.body, h1, h2, h3, h4, h5, h6, p, td { 
  font-family: "HelveticaNeue-CondensedBold";
  font-weight: 800;
}

通过这样做，您将表格主体、表格单元格、标题、段落大小设置为 Helvetica Neue。如果字体不存在，则默认为默认正文样式。

这是来自 Rachael Moore 的完整 Helvetica Neue Condensed 字体堆栈。此 CSS 的变体可以为您提供所需的外观。 http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/

font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif; font-weight:800;

我看到的一个问题是 Helvetica Neue 和 Arial Bold 字体的 em 宽度确实不同，因此您可能会看到布局问题。这只是我的看法。

祝你好运。

【讨论】：

【解决方案2】：

您需要为此使用 JavaScript。当使用备用字体时，有一个 CSS 属性可以帮助调整大小，即 font-size-adjust 属性。 font-size-adjust 属性允许您在使用后备字体时指定最佳纵横比；如果替代字体的纵横比与首选字体不同，则会保留文本的 x 高度（大致为其小写字母的大小）。

【讨论】：

它可能适用于网络，但 JavaScript 不适用于电子邮件。