Css：font-family加载native而不是custom

Question

我有自定义字体＆sons来源sans pro＆＃39;从服务器加载。但它太重了我想要用手机标准（Roboto和San Fransisco）。

我的css：

*{
font-family: Roboto, San Francisco, "Source Sans Pro", Arial, sans-serif;
}

但我的手机仍在下载并使用＆＃34; Source Sans Pro＆＃34;而不是原生的。 如果我只添加一个Roboto - 它运作良好。

那么有没有解决方案不在移动设备上加载自定义字体？

Answer 1

这很复杂： 有一种方法，如何检测移动设备，例如这个库： http://detectmobilebrowsers.com/

您将只包含其jQuery版本，然后添加代码，例如

if{jQuery.browser.mobile == true}{
$(body).css("font-family","Roboto !important");
}

https://jsfiddle.net/0yuk13da/2/

并且在css中你将拥有本机的Source Sans Pro，只有当它是移动设备时，此代码才会覆盖你的css。

BUT！ 遗憾的是，这个库并不适用于所有浏览器。 Mozilla Firefox for android说，它是桌面版。谁知道为什么。 然后，您将需要使用媒体查询。

@media (max-width: 600px) {
  body {
    font-family: Roboto;
  }
}

但即便如此，就像炼金术一样，因为你有许多宽度设备，你有纵向模式和横向模式，如果你试图在手机上获取页面宽度（如通过jQuery {{1它永远不会与您的分辨率相匹配，但更重要的是，每个浏览器都会返回不同的值。您必须尝试使用​​媒体查询，这对于最多设备来说是最佳解决方案。

Answer 2

只需更换您的参赛作品 font-family: Roboto, -apple-system, BlinkMacSystemFont, "Source Sans Pro", Arial, sans-serif;

有关此Stack overflow discussion

的更多详情