android - 如何在 CSS 中应用默认 OS 系统的 "medium"字体

Question

我正在尝试使用 CSS 在各种操作系统上显示默认系统“中号”(或“半粗体”，如果您愿意)字体，例如:

• 在窗口上:Segoe UI SemiBold
• 在 Android 上:Roboto Medium
• 在 iOS 上:...有吗？

我试过使用:

font-family: Segoe UI, -apple-system, sans-serif;
font-weight: 600;

但我得到的字体比 Android 上的 Roboto Medium 字体大。

如果我改用它:

font-family: Segoe UI, -apple-system, sans-serif-medium, sans-serif;
font-weight: 600;

我在 Android 上获得了比普通 Roboto Medium 字体更粗的字体。

最好的跨操作系统解决方案是什么？请注意，如果“中等”字体不可用，我想回退到比普通字体更粗的字体(因此字体粗细:600)。该解决方案至少需要在 Windows、iOS 和 Android 上运行，并在其他地方优雅地回退。

Answer 1

我认为如果你想实现这一点，你需要检查哪个操作系统正在调用你的网站。因此，检查您的用户代理是实现特定操作系统的一种方法。

我建议您使用此 JS 代码:

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

然后在你的 CSS 中你会有这样的东西:

html[data-useragent*='Mac OS X'] {
  font-family: "Segoe UI", sans-serif;
  font-weight: 600;
}

html[data-useragent*='Android'] {
  font-family: "Roboto Medium", sans-serif; 
  font-weight: 600;
}

我会说 iOS 的默认字体是:Lucida Grande。但我不确定，也许你可以搜索一下