预加载@字体面字体?
-
19-09-2019 - |
题
是否有可能预加载或以其他方式缓存@字体面的字体,最有可能使用JavaScript,页面加载之前,所以当页面终于没有加载你没有得到那个丑陋的跳跃?
解决方案
我不知道任何当前的技术,以避免闪烁的字体加载,但您可以通过发送适当的缓存头为您的字体,并确保这一要求尽可能快地经过最小化。
其他提示
一个简单的技术是把你的索引这个某处:
<div class="font_preload" style="opacity: 0">
<span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
<span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
...
</div>
在测试了铬34,Safari浏览器7和FF 29和IE 11
有对“预加载”,这里的几个技巧: http://paulirish.com/2009/fighting-the-font-face- FOUT /
晴欺骗浏览器到尽可能快下载该文件尽可能..
您也可以将其作为一个数据的URI,其中有很大帮助。 也可以隐藏页面内容,并显示它当其准备好了。
2017:现在有预载荷
MDN:该元素的rel属性的预加载值允许你 声明写在你的HTML提取请求,指定 您的网页加载会后很快需要的资源,你 因此,要开始在页面的生命周期的早期预压 负载,在浏览器的主要绘制机械踢之前,这 确保它们是可用早些时候提出并不太可能 阻止页面的第一渲染,从而导致性能的改善。
<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
检查浏览器兼容性。
这是字体预加载最有用的(未等待浏览器找到它在一些CSS)。您还可以预加载一些标识,图标和脚本。
的其它技术的亲/缺点进行了讨论此处 (我的博客)。
正确的字体预载是在HTML5规范一个大洞。 我已经通过所有的这些东西和最可靠的解决方案,我发现了是使用Font.js:
http://pomax.nihongoresources.com/pages/Font.js/
您可以使用它使用相同的API来加载字体使用加载图片
var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
console.log("font loaded");
}
这是更简单,比更轻巧谷歌的笨重的web字体装载机
下面是Font.js的GitHub库:
这应该解决问题。
要回答你最初的问题:是你可以。这只壁虎和WebKit浏览器都支持它目前虽然。结果 你只需要在你的脑袋添加链接标签:
<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">
通过谷歌的 webfontloader
var fontDownloadCount = 0;
WebFont.load({
custom: {
families: ['fontfamily1', 'fontfamily2']
},
fontinactive: function() {
fontDownloadCount++;
if (fontDownloadCount == 2) {
// all fonts have been loaded and now you can do what you want
}
}
});
我这样做通过我的主文档中加入一些字母,并使它透明,并分配,我想加载字体。
e.g。
<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>
使用标准 CSS字体数据加载API 。
等待(所有)的字体来加载,然后显示您的含量:
document.fonts.ready.then((fontFaceSet) => {
console.log(fontFaceSet.size, 'FontFaces loaded.');
document.getElementById('waitScreen').style.display = 'none';
});
最近我正在与DOM CocoonJS限制在canvas元素相兼容的游戏 - 这里是我的方法:
使用fillText方法与尚未加载尚未将正常执行,但没有视觉反馈的字体 - 这样的画布平面将保持不变 - 所有你需要做的是定期检查任何更改画布(例如,通过getImageData循环搜索任何非透明像素),将发生在正确的字体负荷。
/:我在最近的一篇文章 HTTP解释这个技术有点多/rezoner.net/preloading-font-face-using-canvas,686
谷歌有这样一个很好的图书馆: https://developers.google.com/webfonts/文档/ webfont_loader 您几乎可以使用任何字体和的lib将添加类的html标记。
甚至当certrain字体加载并为您提供了JavaScript事件上的活动!
不要忘记为你的fontfiles gzip压缩!它肯定会加快速度!
正如我发现的最好的方法是做的是预加载包含字型样式表,然后让浏览器自动装入它。我使用的字体面的(在HTML页面中)的其他位置,但我可以简要地观察字体变化效果。
<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">
然后在font.css文件,指定如下。
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('open-sans-v16-latin-regular.woff2') format('woff2'); /* Super Modern Browsers */
}
当它通过链接标记(纠正我,如果我错了我不能找到一种方法尚未)预装无法分配一个名称的字体,因此你必须使用字体面的名称分配给字体。尽管这是可能加载通过链接标签的字体,它不推荐,因为你不能指定一个名称与它的字体。如果没有名称与字体的脸,你将无法在网页中任何地方使用它。据gtmetrix,一开始样式表加载,然后才能休息脚本/风格,然后DOM之前的字体加载,因此你没有看到字体变化效果。
您头应该包括预压相对如下:
<head>
...
<link rel="preload" as="font" href="/somefolder/font-one.woff2">
<link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>
此方式woff2将由支持预加载浏览器被预加载,并且所有的回退格式将加载,因为它们通常做。结果 和你的CSS字型应类似于此
@font-face {
font-family: FontOne;
src: url(../somefolder/font-one.eot);
src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
url(../somefolder/font-one.woff) format('woff'),
url(../somefolder/font-one.ttf) format('truetype'),
url(../somefolder/font-one.svg#svgFontName) format('svg');
}
@font-face {
font-family: FontTwo;
src: url(../somefolder/font-two.eot);
src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
url(../somefolder/font-two.woff) format('woff'),
url(../somefolder/font-two.ttf) format('truetype'),
url(../somefolder/font-two.svg#svgFontName) format('svg');
}