加载Google Web字体的7个提示更快

  • 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文件之前加载它。

  1. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

@import代码需要插入到CSS文件中,虽然您可以将其添加到CSS文件的顶部,但仍可能会收到闪存的未格式文本(FOUT) - 这对您的访问者来说是一个糟糕的Web体验。

加载更少的字体

那么,为什么您需要在每个页面上显示4个Google字体。最好选择最多两种字体 - 一种粗体类型的标题和高可读性字体的文章。您选择的字体越多,加载时间越长。

组合字体代码

您可以使用单行代码加载多个Google字体。您不需要为您加载的每种字体粘贴单行代码。参见下面的例子,我们结合了Open Sans和Oswald字体。

  1. <link href='http://fonts.googleapis.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,它将确保在网站的其余部分之前加载,并避免任何闪烁的未分类文本。虽然可以使用异步脚本,但最好使用同步脚本来确保首先加载字体。

  1. <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  2. <script>
  3.   WebFont.load({
  4.     google: {
  5.       families: ['Open Sans', 'Oswald']
  6.     }
  7.   });
  8. </script>

所以尝试这些Google字体技巧,并改变您的网站设计,以获得更大的影响。

VPS笔记
vultr推广

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: