浏览器加载css 字体_如何使用字体加载器提高页面性能

浏览器加载css 字体

非常感谢Jason Pamental撰写本文的灵感。 否则我从来没有考虑过这个问题！

您上次在网页中使用Arial，Times New Roman，Helvetica或… 颤抖 …Comic Sans的时间是什么？ Web字体花了很长时间才到达，但是一旦实现，我们就再也没有回头。 字体很有趣，（通常）免费且易于实现：

@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);

然后，您可以在整个页面中使用字体，例如

body {
	font-family: Ubunutu, sans-serif;
	font-weight: 400;
}

字体还可以在移动设备中使用，因此用户可以在响应式Web设计中获得出色的体验。

还是他们？

在图像之后，字体通常是网页中最大的资产。 上面的Ubuntu字体使页面重量增加了将近250Kb，这在较慢的移动连接上很明显。 Chrome，IE，Safari和Opera在加载字体时留有空白，因此该页面无法使用。 Firefox和旧版Opera会以后备字体显示文本，然后切换-称为无样式文本Flash（FOUT）。 两种选择都不理想。

我们很少担心字体的重量问题，而找借口，例如“这只是首页上的一个问题”或“许多用户将字体缓存起来” 。 我们可能会省略较少使用的字体； 例如，删除大多数Ubuntu斜体样式可节省近40％。 很少有人敢采用使用标准OS字体的显而易见的解决方案-我们的客户和设计师永远不会原谅我们。

JavaScript webfontloader

幸运的是，还有另一个选择： webfontloader 。 这个JavaScript库可以加载从字体谷歌 ， Typekit ， Fonts.com ， Fontdeck一旦页面加载在后台或您自己的服务器。 该库本身在页面上又增加了17Kb，但也作为后台进程下载。

要加载上面的Ubuntu字体集，我们创建一个名为WebFontConfig的全局对象，该对象定义我们的字体和设置，然后加载webfontloader本身：

var WebFontConfig = {
	google: {
		families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
	},
	timeout: 2000
};

(function(){
	var wf = document.createElement("script");
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.async = 'true';
	document.head.appendChild(wf);
})();

因此，我们可以根据设备和带宽容量来确定是否加载全部，全部或部分字体。 理想情况下，我们可以使用Network Information API，但浏览器支持仍然有限。 另外，请注意WebFontConfig的timeout设置； 如果字体文件需要超过两秒钟的下载时间，则该请求将被放弃。

CSS回调

在操作过程中，webfontloader将类名称应用于html元素：

• .wf-loading已请求所有字体
• .wf-active所有字体都可用
• .wf-inactive无法加载任何字体

类也适用于单个字体：

• .wf-<familyname>-<fvd>-loading -已请求一种字体
• .wf-<familyname>-<fvd>-active -活动-单个字体可用
• .wf--<familyname>-<fvd>-inactive -不.wf--<familyname>-<fvd>-inactive -无法加载单个字体

其中， <familyname>是字体名称的净化版本，而<fvd>是变体描述，例如i4表示400重量斜体。

这样一来，我们就可以在下载字体后切换字体，就像Firefox的运行方式一样，例如

/* default OS fonts */
body {
	font-family: arial, sans-serif;
}

/* fonts now loaded */
.wf-active body {
	font-family: 'Ubuntu';
}

JavaScript回调

可以在WebFontConfig定义类似JavaScript回调函数，尽管在这种情况下有用的情况较少，例如

var WebFontConfig = {
	google: {
		families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
	},
	timeout: 2000,
	loading: function() {},
	active: function() {},
	inactive: function() {},
	fontloading: function(familyName, fvd) {},
	fontactive: function(familyName, fvd) {},
	fontinactive: function(familyName, fvd) {}
};

有关更多信息，请参阅webfontloader文档 。

最小化FOUT

如果您的后备字体的样式，粗细或与网络字体的间距明显不同，则“未样式化文本的闪烁”会感到震撼。 但是，通过一些试验，您可以调整后备字体，粗细，行高和边距，以确保加载Web字体时页面元素保持在大致相同的位置…

见笔如何使用字体装载机克雷格·巴克尔（ @craigbuckler ）上CodePen 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

单击“切换字体”按钮以查看字体切换效果。 更改并非完全没有引起注意，但重要的是，如果用户开始阅读，则不会失去自己的位置。

您可以在任何页面上添加“切换字体”按钮，以帮助您评估合适的后备样式：

<button onclick="document.documentElement.classList.toggle('wf-active');return false;">toggle styles</button>

总结：字体使用可能是免费的，但请尽量减少对用户的成本。 如果要加载兆字节的字体文件，那么精心创建的RWD布局不适合手机！

翻译自: https://www.sitepoint.com/improve-page-performance-font-loader/

浏览器加载css 字体