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

Using browser system font stack in html email

做系统字体堆栈,例如像...

<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 应用程序)上进行了测试,它似乎可以正常工作到目前为止。

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

是的,系统字体适用于每个电子邮件客户端, 包括 Mac OS 上的每个 Apple 产品(Apple Mail,[=41= 的 Outlook ],等等)和 iOS(iPhone 邮件,iPad 邮件,iOS 的 Gmail,等等)

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

<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>
  1. 如果安装了 -apple-system,则显示。
  2. 否则,如果安装了 BlinkMacSystemFont,则显示它。
  3. 否则,如果安装了 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"