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

Posted

技术标签:

【中文标题】iOS 电子邮件中未显示 Web 安全字体【英文标题】:Web-Safe font not displaying in iOS emails 【发布时间】: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>

【问题讨论】:

【参考方案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

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

【讨论】:

我将 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/

【讨论】:

以上是关于iOS 电子邮件中未显示 Web 安全字体的主要内容,如果未能解决你的问题,请参考以下文章

在 TestFlight 应用程序构建中未显示?

mailchimp 电子邮件在 gmail 中未正确显示

防弹背景图像在 Outlook 中未正确显示 - 电子邮件

WooCommerce 订单电子邮件中未显示自定义电话号码字段

Java Mail - 电子邮件客户端中未显示附件?

邮件中未显示 HTML 内容 [重复]