iOS 封电子邮件中未显示网络安全字体

Question

尝试在我的 html 电子邮件中使用 Impact 字体，它在 Outlook 365 windows 和 Web 客户端以及浏览器中的 Gmail 客户端中工作正常，但是 iOS本机邮件应用程序、Gmail 应用程序和 Outlook 应用程序都默认返回 arial。我错过了什么？

这是有问题的 table。 Class 是 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>

Answer 1

影响可能不会 'websafe'，因为它似乎未安装在 Android 和 iOS（移动设备）上，否则它会起作用。除非 class "MsoNormal" 有不同的字体系列。（我会删除它，它不是必需的或与性能无关。）

如果失败，您需要使用 @font-face 从 public 网站加载它。请记住，并非所有内容都支持 @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">

的形式加载

Answer 2

苹果IOS13不支持Impact。 MacOS 13 可以。

Outlook 支持 Impact，Google 支持 Impact。

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

由于您正在寻找粗体 san-serif 字体，我建议使用 class .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/

iOS 封电子邮件中未显示网络安全字体

Web-Safe font not displaying in iOS emails

html

css

ios

html-email

email-client