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
但要让它在所有东西上都能正常工作,你需要将它保存为图像,并以<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/【讨论】:
以上是关于iOS 电子邮件中未显示 Web 安全字体的主要内容,如果未能解决你的问题,请参考以下文章