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

【问题标题】：Using browser system font stack in html email在 html 电子邮件中使用浏览器系统字体堆栈
【发布时间】：2017-07-07 04:06:35
【问题描述】：

做系统字体堆栈，例如类似...

<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 应用程序）上对其进行了测试，到目前为止它似乎工作正常。

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

【问题讨论】：

标签： outlook gmail html-email apple-mail

【解决方案1】：

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

字体堆栈的工作方式与 Web 上的一样。使用您的示例：

<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"

【讨论】：

我其实不知道这个。很好的答案。