浏览器加载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 字体