如何在 CSS 中应用默认 OS 系统的“中等”字体

Posted 2023-03-12

【中文标题】如何在 CSS 中应用默认 OS 系统的“中等”字体

【英文标题】：How to apply the default OS system's "medium" font in CSS

【发布时间】：2015-10-14 07:55:18

【问题描述】：

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

在窗口上：Segoe UI 半粗体 在 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 上运行，并且可以优雅地回退到其他地方。

【参考方案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。但我不确定，所以也许你可以搜索一下

【参考方案2】：

您是否考虑过使用来自 Google Fonts 的中等粗细的免费 Roboto 字体？它的支持非常好，您可以将它的权重全局设置为 600，使其在大量设备上看起来一致。

但请注意，对于不支持 svg/woff/ttf 字体的设备（幸好目前使用的字体不多），您将无法使用这种字体并且必须选择备用字体.