README

WordPress 插件，允许浏览器在使用网页字体时显示无样式文本的闪光（FOUT）。

设置

安装并激活插件，然后告诉插件要监听哪些字体族

<?php // functions.php

Rareloop\FontFout::init([
    'PT Serif',
    'Open Sans',
]);

这将向您的 <body> 底部添加所需的内联 JavaScript。当所有字体加载完毕后，fonts-loaded 类将添加到您的 <html> 元素中。您可以使用此功能在 CSS 中控制何时使用网页字体

body {
    font-family: 'Georgia, serif';
}

.fonts-loaded body {
    font-family: 'PT Serif, Georgia, serif';
}

注入到您页面中的 JavaScript 会在所有字体加载完毕后设置一个 cookie。一旦加载完毕，您就可以假设用户的浏览器已经缓存了该字体，因此不需要再次下载。在这种情况下，您可以在将其发送到浏览器之前将 fonts-loaded 类添加到您的 <html> 元素中。

要在模板中添加此优化，您可以使用以下短代码

<!DOCTYPE html>
<html class="no-js [fontfout-htmlclass]">
<head>
    <title>...</title>
</head>
<body>
    ...
</body>
</html>

短代码仅在检测到 cookie 时添加类。它还会防止注入内联 JavaScript，减少未来页面加载的负载。

该插件添加了以下 cookie：fonts-loaded，您应将其添加到您的 Cookie/隐私策略中。