使用原生移動字體而不是自定義字體加載網站的最佳方式

Question

好吧，我已經制作了這個響應式網站，它在移動和桌面上看起來不錯。我使用了4種不同的Lato來設置我的文字。

儘管在桌面上加載字體（來自Google WebFonts）所用的時間相對較少，但在移動設備上，出現任何文本需要花費4-5秒（FOUT恕我直言）。

所以我想，在這些移動設備上，爲什麼不使用他們的原生字體和字體？他們看起來不是很糟糕，並會讓我的網站顯得更快加載。

哪種方法最快，看起來最好？

1）使用JavaScript檢測移動設備和應用全局規則

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

（它是一個非常糟糕的做法？）

2）使用本地字體使用Google WebFontLoader到第一顯示器和後延遲，加載時使用Lato。 （注意，webfont腳本本身可能需要一段時間才能加載）

3）另一種smartass方式？

Answer 1

我會推薦使用媒體查詢並將最大設備寬度應用於這些。

這些媒體查詢將只適用於具有一定寬度的設備。桌面瀏覽器將忽略這些樣式。 您可以將最大寬度更改爲任何寬度（如果您要定位平板電腦等）

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