我正在使用@font-face 在我的网站中嵌入字体。首先文本呈现为系统默认值，然后（一旦字体文件可能已加载）正确的字体会在几分之一秒后呈现。有没有办法通过将页面渲染延迟到字体加载或类似之后来最小化/消除这种延迟。
【问题讨论】：
我在渲染到 HTML 画布时遇到了类似的问题，这是我的解决方案。它基于 FontFace API，类似于 Holtwicks 方法。主要区别在于这是一种通用方法，并且它可以开箱即用地用于外部字体/样式表（例如 google 字体）。
几个笔记；
如果字体未知，fonts.load( ... ) 将很乐意用一组空字体解决。据推测，如果在添加声明字体的样式表之前调用此代码，则会发生这种情况。我添加了fonts.check(...) 来解决这个问题。
这将让您等待 javascript 执行，直到字体可用，因此对于“普通”HTML 内容，它不会开箱即用。您可以将其与上面的 Holtwicks 答案结合使用。
export async function waitForFontLoad(
font: string,
timeout = 1000,
interval = 10
) {
return new Promise((resolve, reject) => {
// repeatedly poll check
const poller = setInterval(async () => {
try {
await document.fonts.load(font);
} catch (err) {
reject(err);
}
if (document.fonts.check(font)) {
clearInterval(poller);
resolve(true);
}
}, interval);
setTimeout(() => clearInterval(poller), timeout);
});
}
【讨论】：
这段代码对我来说效果很好。它使用Font Loading API，在现代浏览器中得到了很好的支持。
<style>
@font-face {
font-family: 'DemoFont';
font-style: normal;
font-weight: 400;
src: url("./fonts/DemoFont.eot");
src: url("./fonts/DemoFont.woff2") format("woff2"),
url("./fonts/DemoFont.woff") format("woff"),
url("./fonts/DemoFont.ttf") format("truetype");
}
.font {
font-family: 'DemoFont';
color: transparent;
}
html.font-loaded .font {
color: inherit; // Override `transparent` from .font
}
</style>
<script>
// Check if API exists
if (document && document.fonts) {
// Do not block page loading
setTimeout(function () {
document.fonts.load('16px "DemoFont"').then(() => {
// Make font using elements visible
document.documentElement.classList.add('font-loaded')
})
}, 0)
} else {
// Fallback if API does not exist
document.documentElement.classList.add('font-loaded')
}
</script>
诀窍是为使用该字体的元素将 CSS 颜色设置为透明。加载后，通过将 font-loaded 类添加到 <html> 元素来重置它。
请将DemoFont 替换为对您的项目有意义的内容以使其正常运行。
【讨论】：
fonts.load('10px Nothing') 很乐意用一个空的字体列表来解决。您需要结合 load 和 check。
使用https://github.com/typekit/webfontloader
并检查配置中的事件 https://github.com/typekit/webfontloader#configuration
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: [ "CustomFont1", "CustomFont2" ]
},
active: function() {
//Render your page
}
});
</script>
【讨论】：
编辑：最好的方法可能是base64 编码你的字体。这意味着您的字体必须在您的 HTML 被解析和显示时完全加载。您可以通过单击“专家”然后单击“base64 编码”来使用字体松鼠的 webfont 生成器https://www.fontsquirrel.com/tools/webfont-generator 来完成此操作。这就是 TypeKit 等服务的工作方式。
原答案： 另一种检测字体是否已加载的方法是使用 FontLoader https://github.com/smnh/FontLoader 或复制它们的策略。
它们绑定到浏览器中的滚动事件，因为当字体加载时它会调整文本大小。它使用两个包含的 div（当高度变化时会滚动）和一个单独的 IE 后备。
另一种方法是使用setInterval 定期检查 DOM，但使用 javascript 事件更快更好。
显然，您可能会执行一些操作，例如将 body 的不透明度设置为 0，然后在字体加载后显示它。
【讨论】：
<style> 标签。之后，我测量文本的大小。但它（至少）不适用于 Safari（iOS 15），因为我将大小作为默认字体应用而不是新字体。
由于没有人提到这一点，我相信这个问题需要更新。我设法解决问题的方法是使用现代浏览器支持的“预加载”选项。
如果有人不需要支持旧浏览器。
<link rel="preload" href="assets/fonts/xxx.woff" as="font" type="font/woff" crossorigin>
一些包含更多细节的有用链接：
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content http://www.bramstein.com/writing/preload-hints-for-web-fonts.html
【讨论】：
您可以在 @font-face 中使用 CSS font-display。 所有可用值的关键字是：
Giulio Mainardi 写了一篇关于它们的好文章，你应该在 sitepoint 上使用它。
【讨论】：
font-display: block。绝对不要做 what Ryan Taylor suggested 和 base64-encode 任何事情；没有用户愿意下载 30% 以上的数据，这样您就可以阻止渲染直到下载完成，即使（不，尤其是，在移动连接上时）如果它“只是”一个问题例如300kB。
这取决于浏览器的行为方式。
首先你的@font 声明在哪里？它是嵌入到您的 HTML 中，在页面上的 CSS 表中声明，还是（希望）在外部 CSS 表中声明？
如果它不在外部工作表中，请尝试将其移至一张（这通常是更好的做法）。
如果这没有帮助，您需要问问自己，秒差的一小部分是否真的对用户体验有很大的不利影响？如果是，那么请考虑 JavaScript，您可能可以做一些事情，重定向、暂停等，但这些实际上可能比原来的问题更糟糕。对用户来说更糟，维护也更糟。
此链接可能会有所帮助：
【讨论】：
(function() {
document.getElementsByTagName("html")[0].setAttribute("class","wf-loading")
document.getElementsByTagName("html")[0].setAttribute("className","wf-loading")
})();
使用此方法.. 与 Webfont.js 一起使用
【讨论】：
Joni Korpi 有一篇关于在页面其余部分之前加载字体的好文章。
http://jonikorpi.com/a-smoother-page-load/
他还使用 loading.gif 来缓解延迟，这样用户就不会感到沮丧。
【讨论】：
只有 IE 会先加载字体，然后再加载页面的其余部分。 其他浏览器出于某种原因同时加载内容。想象一下，托管字体的服务器或字体下载存在问题。 在加载字体之前，您将挂起整个站点。在我看来，一闪而过的无样式文本总比根本看不到网站要好
【讨论】：
flash of unstyled text 使您的用户认为您（创建者）在您的工作中不专业，并且应用程序存在一些错误。这是 UX 人。
可能是这样的：
$("body").html("<img src='ajax-loader.gif' />");
然后当页面加载时，将正文的内容替换为实际内容，并希望完全呈现字体，但您可能不得不玩这个...
【讨论】：