outlook - 在 html 电子邮件中使用浏览器系统字体堆栈

Question

做系统字体堆栈，例如就像是...

<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"> Whatever sans-serif font, but please use that ugly Arial as a last resort only </p>

...也在常见的电子邮件客户端中工作？

我已经在自己的设备(Outlook 2017 和 Android 应用程序、Android 电子邮件、Gmail Web 和 Android 应用程序)上对其进行了测试，到目前为止它似乎可以正常工作。

但是苹果呢？我没有要测试的设备，我不知道我是否必须使用系统名称或字体的真实名称。

Answer 1

是的，系统字体适用于每个电子邮件客户端，包括 Mac OS(Apple Mail、Mac 版 Outlook 等)和 iOS(iPhone 邮件、iPad 邮件、iOS 版 Gmail 等)上的所有 Apple 产品

字体堆栈的工作原理就像在网络上一样。使用您的示例:

<p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"> Whatever sans-serif font, but please use that ugly Arial as a last resort only </p>

如 -apple-system已安装，显示。

否则如果 BlinkMacSystemFont已安装，显示。

否则如果 Segoe UI已安装，使用它。

等等。

GitHub 使用具有 100% 系统字体的字体堆栈，涵盖大多数基础，仅作为示例:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"