rareloop/wp-font-fout
Composer 安装命令：
composer require rareloop/wp-font-fout
包简介
Optimise font loading, producing a FOUT instead of a FOIT
README 文档
README
WordPress plugin that allows browsers to show a Flash Of Unstyled Text (FOUT) when using web fonts.
Setup
Install & activate the plugin, then tell the plugin what font families to listen for:
<?php // functions.php Rareloop\FontFout::init([ 'PT Serif', 'Open Sans', ]);
This will add the required JavaScript inline to the bottom of your <body>. When all the fonts have loaded the fonts-loaded class will be added to your <html> element. You can use this in your CSS to control when your web font is used:
body { font-family: 'Georgia, serif'; } .fonts-loaded body { font-family: 'PT Serif, Georgia, serif'; }
More Configuration
The init function also take additional arguments that lets you control the cookie that is created to know when fonts are loaded. If you wanted to change the cookie name to _fonts_cached_in_browser and make it last 30 days you could do the following:
<?php // functions.php Rareloop\FontFout::init(['PT Serif'], '_fonts_cached_in_browser', 60 * 60 * 24 * 30);
Optimising for future page views
The JavaScript injected into your page will set a cookie once all fonts are loaded. Once loaded you can assume that your users browser will have cached the font so shouldn't need to download again. In this instance you can have the fonts-loaded class added to your <html> element before it's sent to the browser.
To add this optimisation you can use the following shortcode in your template:
<!DOCTYPE html> <html class="no-js [fontfout-htmlclass]"> <head> <title>...</title> </head> <body> ... </body> </html>
The shortcode will only add the class when the cookie is detected. It will also prevent the inline JavaScript from being injected, reducing the payload of future page loads.
The plugin adds the following cookie: fonts-loaded, which you should add to your Cookie/Privacy Policy.
rareloop/wp-font-fout 适用场景与选型建议
rareloop/wp-font-fout 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 9 次下载、GitHub Stars 达 0， 最近一次更新时间为 2015 年 12 月 16 日， 在 PHP 生态内属于活跃度较高的组件。
我们在过去多个企业项目中使用过 rareloop/wp-font-fout 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。
基于 rareloop/wp-font-fout 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。
统计信息
- 总下载量： 9
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 0
- 点击次数： 0
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： Unknown
- 更新时间： 2015-12-16