iOS 电子邮件中未显示 Web 安全字体答案

【问题标题】：Web-Safe font not displaying in iOS emailsiOS 电子邮件中未显示 Web 安全字体
【发布时间】：2021-06-15 04:38:42
【问题描述】：

尝试在我的 html 电子邮件中使用 Impact 字体，该字体在 Outlook 365 窗口和 Web 客户端以及浏览器中的 Gmail 客户端中运行良好，但 iOS 本机邮件应用程序、Gmail 应用程序和 Outlook 应用程序都默认返回 arial .我错过了什么？

这是有问题的表格。类是从 MS 端口遗留下来的，我将它留在里面是希望它能提高 mso 性能，但它真正做的只是设置默认字体系列、字体大小和边距 (0)。

<table cellspacing=0 cellpadding=0 style="background:red;border-collapse:collapse;border:none;padding:0;margin:0;">
  <tr>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
  </tr>
  <tr>
    <td style="width:6.5pt"></td>
    <td>
      <p class="MsoNormal" style="margin:0;text-align:center;line-height:normal;font-size:14.0pt;font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color:white;">
        10% STOREWIDE SALE</p>
      <p class="MsoNormal" style="margin:0;text-align:center;line-height:normal;">
        <a style="font-size:14.0pt;font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;color:white;text-decoration-color: white;" href="https://www.bacs.com.au/store">SHOP NOW</a>
      </p>
      <p class="MsoNormal" style="margin:0;text-align:center;line-height:normal;font-size:10.0pt;font-family:Arial, Helvetica, sans-serif;color:white;">
        Online Only. Ends 30 June 21.</p>
    </td>
    <td style="width:6.5pt"></td>
  </tr>
  <tr>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
    <td style="height: 6.5pt;"></td>
  </tr>
</table>

【问题讨论】：

标签： html css ios html-email email-client

【解决方案1】：

Impact 可能不是“网络安全”，因为它似乎没有安装在 Android 和 iOS（移动）上，否则它会起作用。除非“MsoNormal”类有不同的字体系列。（我会删除它，它没有必要或与性能无关。）

如果失败，您需要使用@font-face 从公共网站加载它。请记住 @font-face 不支持所有内容：https://www.caniemail.com/features/css-at-font-face/

作为后备，您可能希望通过已为此设置的 Google 字体使用类似的字体：https://fonts.google.com/specimen/Anton

但要让它在所有东西上都能正常工作，你需要将它保存为图像，并以<img src="https://www.imagehere.com/image.png" alt="Text here"> 的形式加载

【讨论】：

我将 Roboto 添加到字体堆栈中，因为它受到 google（以及 Gmail）的特别支持，无需添加为 @font-face（gmail 不支持），所以感谢您指出我找到那个方向，但是apple says it includes Impact with MacOS - 为什么不是iOS！？ :$.

【解决方案2】：

Apple IOS 13 不支持 Impact。 MacOS 13 可以。

Outlook 支持 Impact，Google 支持 Impact。

类似的字体是SF Compact，但我不确定它是否可以称为电子邮件中的字体。

由于您正在寻找粗体的无衬线字体，我建议使用 .MsoNormal 类并添加以下内容：

font-family: 'Arial Narrow'; font-weight: bold;

如果您将其放入@media 呼叫中，Outlook 将跳过此步骤。如果您使用 Webkit @media 调用，Google 会跳过它。

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .MsoNormal {/*your code */}
}

Haettenschweiler, 'Arial Narrow Bold' 不支持网络安全，如果没有指向字体的网络字体 URL，则不受支持。

祝你好运。

Google 支持的字体：http://jsfiddle.net/wallyglenn/g35nchmL/
Outlook 支持的字体：http://jsfiddle.net/wallyglenn/d23s80po/2/
IOS支持字体：https://developer.apple.com/fonts/system-fonts/
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/

【讨论】：