Typekit Cache 项目教程

Typekit Cache 项目教程

typekit-cache Keeps a site's Typekit in localStorage and injects it on page load, eliminating the Flash Of Invisible/Unstyled Text. 项目地址: https://gitcode.com/gh_mirrors/ty/typekit-cache

1、项目介绍

Typekit Cache 是一个开源项目，旨在通过将 Typekit 字体缓存到浏览器的 localStorage 中，并在页面加载时注入这些字体，从而消除页面加载时的“Flash Of Invisible/Unstyled Text”（FOIT）问题。这不仅提升了用户体验，还优化了在慢速或离线连接下的页面加载性能。

该项目适用于使用旧版 Typekit 安装（基于 JavaScript）的网站。对于新版 Typekit 安装（使用 <link> 标签），浏览器会自动缓存资源，因此 Typekit Cache 的改进效果有限。

2、项目快速启动

安装

首先，克隆项目到本地：

git clone https://github.com/morris/typekit-cache.git

使用

将 typekit-cache.min.js 的内容复制到你的 Typekit 嵌入代码之前。例如：

<script>
  /* 这里是 typekit-cache.min.js 的内容 */
</script>
<script>
  (function(d) {
    var config = {
      kitId: 'abcd1234',
      scriptTimeout: 3000
    };
    var h = d.documentElement;
    // 其他 Typekit 嵌入代码
  })(document);
</script>

注意事项

• 确保使用单独的 <script> 标签来确保 Typekit 嵌入代码在异常情况下仍然运行。
• 如果使用 sessionStorage 而不是 localStorage，只需替换 localStorage 的引用。

3、应用案例和最佳实践

应用案例

假设你有一个使用 Typekit 字体的网站，用户在首次访问时可能会遇到 FOIT 问题，导致页面加载时字体短暂不可见。通过使用 Typekit Cache，你可以显著减少或消除这一问题，提升用户体验。

最佳实践

1. 定期更新缓存：虽然 Typekit Cache 会自动缓存字体，但建议定期检查并更新缓存，以确保用户始终使用最新的字体版本。
2. 兼容性测试：在不同浏览器和设备上测试 Typekit Cache 的效果，确保其在各种环境下都能正常工作。
3. 性能监控：使用性能监控工具（如 Google Analytics 或 Lighthouse）来跟踪页面加载时间和用户体验，确保 Typekit Cache 的引入没有负面影响。

4、典型生态项目

相关项目

1. Font Face Observer：一个用于检测网页字体加载状态的 JavaScript 库，可以与 Typekit Cache 结合使用，进一步提升字体加载的可靠性。
2. Webfontloader：由 Google 和 Typekit 共同开发的库，用于控制网页字体的加载行为，可以与 Typekit Cache 结合使用，提供更全面的字体加载解决方案。

通过结合这些生态项目，你可以构建一个更加健壮和高效的网页字体加载系统。

typekit-cache Keeps a site's Typekit in localStorage and injects it on page load, eliminating the Flash Of Invisible/Unstyled Text. 项目地址: https://gitcode.com/gh_mirrors/ty/typekit-cache