好的,我已经建立了这个自适应网站,在移动设备和台式机上看起来都很棒。我正在使用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 ;
}
}