javascript - 用本地移动字体而不是自定义字体加载网站的最佳方法

好的，我已经建立了这个自适应网站，在移动设备和台式机上看起来都很棒。我正在使用4种不同的Lato权重设置文本样式。

在台式机上，虽然从Google WebFonts加载字体花费的时间相对还可以，但在移动设备上，要花4-5秒钟才能显示任何文本（FOUT IMHO的确很糟糕）。

所以我想，在这些移动设备上，为什么不使用其本机字体和字体粗细？它们看起来不是很糟糕，并且会使我的网站加载速度更快。

哪种方法最快，看上去最好？

1）使用javascript检测移动设备并应用全局规则

   .mobile-detected *{
        font-family:'Roboto', 'Helvetica', 'Arial', sans-serif !important ;
     }

（这真的是不好的做法吗？）

2）使用Google WebFontLoader首先使用本机字体显示，并在延迟后在加载时使用Lato。 （请注意，webfont脚本本身可能需要花费一些时间才能加载）

3）另一种smartass方法？

最佳答案

我建议使用媒体查询，并将max-device-width应用于这些查询。

这些媒体查询仅适用于具有一定宽度的设备。桌面浏览器将忽略这些样式。
您可以将max-width更改为您需要的任何宽度（如果您要定位平板电脑等）

@media only screen
and (max-device-width : 767px) {
   body *{
    font-family:'Roboto', 'Helvetica', 'Arial', sans-serif !important ;
   }
}