用原生移动字体而不是自定义字体加载网站的最佳方式

Best way to load website with native mobile fonts instead of custom fonts

本文关键字：字体 网站 加载 自定义 最佳 方式 原生 移动      更新时间：2023-09-26

好吧，所以我制作了这个响应式网站，它在移动和桌面上看起来都很棒。我使用Lato的4种不同权重来设置文本样式。

虽然在桌面和手机上加载字体（从Google WebFonts）所需的时间相对来说还可以，但在出现任何文本之前需要4-5秒的时间（FOUT IMHO的情况非常糟糕）。

所以我想，在这些移动设备上，为什么不使用它们的原生字体和字体权重呢？它们看起来并不是很糟糕，会让我的网站看起来加载得更快。

哪种方法最快，看起来最好？

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

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

（这真的是一种糟糕的做法吗？）

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

3） 另一种聪明的方式？

我建议使用媒体查询并对其应用最大设备宽度。

这些媒体查询将仅适用于具有特定宽度的设备。桌面浏览器将忽略这些样式。你可以将最大宽度更改为你认为需要的任何宽度（如果你想瞄准平板电脑等）

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