预加载@字体面字体？

StackOverflow https://stackoverflow.com/questions/1330825

题

是否有可能预加载或以其他方式缓存@字体面的字体，最有可能使用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库：

https://github.com/Pomax/Font.js

这应该解决问题。

要回答你最初的问题：是你可以。这只壁虎和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';
});

的演示CodePen

最近我正在与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');
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top