- A+
您的网站如何使Google字体的加载速度更快?看到未分类的字体或不同的默认字体加载,然后被您的Google网页字体替换,导致出现闪烁的无字母文本并不罕见!
这是因为当访问者访问您的网站时,浏览器会加载CSS文件中建议的默认Web安全字体(如Arial等),然后加载Google字体时,会使用Google字体替换默认字体...但是对于网页打开的初始阶段来说,它会破坏您网站的网页设计体验,并使访客感到不耐烦。所以你需要加载Web字体的速度更快,需要使用正确的方式。
比如使用Oswald字体作为标题和Open Sans字体的文章文字。看看如何加载它以获得最佳结果。
首先加载Google字体
放置Google导入代码,以便在HTML文件之后加载第一个HTML标签。这将确保字体在CSS之前加载。请记住,由于CSS文件跟随,您可以使用CSS文件中的字体对标签进行样式化。
使用链接格式
Google字体提供3种方式来加载Google网络字体 - @import,link rel和javascript。使用链接rel标签将允许您将代码放在html之上,并在CSS文件之前加载它。
- <link href='http://fonts.useso.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
@import代码需要插入到CSS文件中,虽然您可以将其添加到CSS文件的顶部,但仍可能会收到闪存的未格式文本(FOUT) - 这对您的访问者来说是一个糟糕的Web体验。
加载更少的字体
那么,为什么您需要在每个页面上显示4个Google字体。最好选择最多两种字体 - 一种粗体类型的标题和高可读性字体的文章。您选择的字体越多,加载时间越长。
组合字体代码
您可以使用单行代码加载多个Google字体。您不需要为您加载的每种字体粘贴单行代码。参见下面的例子,我们结合了Open Sans和Oswald字体。
- <link href='http://fonts.useso.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>
加载默认变体
每个字体选项允许您加载各种样式的字体。您真的需要添加所有变体和多个加载次数多次。加载多个变体相当于加载多个字体。选择每种字体的默认样式,它只会加载一种变体。
例如 - 加载Open Sans字体默认选项赋予加载时间影响15
选择所有选项时,页面加载的影响会增加10倍!
加载更快的字体
每个字体的Google字体页面使得非常清楚字体需要加载多长时间。字体旁边的负载表显示每种字体的加载速度。如果您继续添加更多字体,则需要较长的时间才能加载。一些字体很重,可以占用加载时间的两倍。所以选择明智,选择加载更快的字体。例如Open Sans的页面影响为15,而Droid Sans将更多的是25!
使用Web Font Loader
对于那些只需要在加载CSS之前加载他们的Google字体,并且需要绝对确定没有无字母的文本惊喜的人,请使用网页字体加载程序 - 一个JavaScript,它将确保在网站的其余部分之前加载,并避免任何闪烁的未分类文本。虽然可以使用异步脚本,但最好使用同步脚本来确保首先加载字体。
- <script src="//ajax.useso.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
- <script>
- WebFont.load({
- google: {
- families: ['Open Sans', 'Oswald']
- }
- });
- </script>
所以尝试这些Google字体技巧,并改变您的网站设计,以获得更大的影响。