Question

我试图拥有默认系统＆＃34; medium＆＃34; （或者＃34; semibold＆＃34;如果你愿意的话）使用CSS在各种操作系统上显示字体，例如：

on Window：Segoe UI SemiBold
：Roboto Medium
：...有一个吗？

我尝试过使用：

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字体更加大胆。

什么是最好的跨操作系统解决方案？请注意，如果是＆＃34;媒体＆＃34;字体不可用，我想回到比普通字体更粗的字体（因此字体重量：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。但我不确定，也许你可以搜索那个

Answer 2

您是否考虑过使用Google Fonts中等重量的免费Roboto字体？它的支持非常出色，您可以将其全局重量设置为600，使其在大型设备上始终如一。

请注意，对于不支持svg / woff / ttf字体的设备（幸运的是当前没有使用过很多字体），您将无法使用这种字体，并且必须选择后备字体

如何应用默认的OS系统＆＃34; medium＆＃34; CSS中的字体

2 个答案: