53 javascript css fonts embedding font-face
是否有可能在页面加载之前预加载或以其他方式缓存@ font-face字体,最有可能使用javascript,这样当页面最终加载时你不会得到那个丑陋的跳转？
Raf*_*lle 35
一个简单的技术是将它放在索引中的某个位置:
<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>
在Chrome 34,Safari 7和FF 29以及IE 11上进行了测试
Pau*_*ish 23
这里有一些"预加载"技术:http: //paulirish.com/2009/fighting-the-font-face-fout/
主要是欺骗浏览器尽快下载文件..
您也可以将其作为数据uri提供,这有很大帮助.并且你可以隐藏页面内容并在准备好时显示它.
Chr*_*ssy 21
2017:你现在有预装
MDN:元素的rel属性的预紧力值允许你写的声明获取你的HTML请求,指定您的网页将加载后很快需要的资源,因此要开始在页面加载的生命周期的早期预压,前浏览器的主要渲染机制开始运行.这可确保它们更早可用,并且不太可能阻止页面的首次渲染,从而提高性能.
<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />
检查浏览器的兼容性.
它对字体预加载最有用(不等待浏览器在某些CSS中找到它).您还可以预加载一些徽标,图标和脚本.
这里讨论其他技术的优点/缺点(不是我的博客).
小智 18
您的头部应包括预紧力 rel，如下所示：
<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');
}
正确的字体预加载是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");
}
它比谷歌笨重的Webfont Loader更简单,更轻巧
这是Font.js的github仓库:
https://github.com/Pomax/Font.js
当然，第一步是在 HTML 中预加载字体：
<link rel="preload" href="pacifico.woff2" as="font" crossorigin="anonymous">
请注意，即使字体驻留在同一台服务器上，字体总是在启用跨源资源共享 (CORS) 的情况下预加载：
当预加载在启用 CORS 的情况下获取的资源（例如 fetch()、XMLHttpRequest 或字体）时，需要特别注意在元素上设置 crossorigin 属性。该属性需要设置为匹配资源的 CORS 和凭据模式，即使提取不是跨域的。
因此，该crossorigin="anonymous"属性是绝对必要的。
对于可选type="MIME-type"属性则不能这样说。浏览器和机构之间对于MIME 类型字体应该是什么存在很多分歧。如果某个浏览器指定了错误的类型，则不会预加载字体文件。因此，最好不要同时使用type="MIME-type"HTML 属性。
然后，酷孩子们称之为 FOIT；看不见文字的闪光。在现代浏览器中，可以通过将font-display: swap;属性添加到@font-faceCSS 声明来轻松避免这种 FOIT 。
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(pacifico.woff2) format('woff2');
font-display: swap;
}
请参阅此更新的答案：/sf/answers/3278129781/
我不知道当前有什么技术可以避免字体加载时的闪烁，但是您可以通过为您的字体发送适当的缓存标头并确保该请求尽快通过来最大程度地减少闪烁。