css - 在 vue 中的单页应用程序中对抗无样式文本的闪烁

Question

使用 FEF 的 SPA 中的 FOUT。这是很多奇怪的首字母缩略词。 :)

但这仍然是一个问题。

我有一个动态组件，它加载了一堆旨在以非常特定的方式查看的组件。每个人都有自己的 CSS，而且至关重要的是，还有自己的特定字体。

字体是这里的问题。

在这种情况下有什么方法可以避免这种 FOUT？

这是我目前对该主题的研究:

1. 浏览器有一种机制可以隐藏它检测到的带有自定义字体样式的文本，直到字体加载完毕。

   • 这在 vue 中不起作用，因为文本尚未加载，浏览器也无法检测到，因此当 JS 放置文本时，不会触发此浏览器机制。
   • 可能可以通过 SSR 修复，静态 DOM - 浏览器现在可以检测到。仍然可能不想要 - FOIT(不可见文本的闪烁)可以说更糟(无内容与不良内容)。

2. 这对动态组件没有任何作用

   • CSS 是合并的，除非是异步组件。
   • 您确实获得了所有 CSS 导入，但不是所有字体，直到它们被用在页面上。 IE。它为 css 导入发出网络请求，而不是字体，直到页面上的某些内容使用此字体设置样式。至少它是……很快。 :D

3. WebFontLoader?

   • google/typekit 的 js 库，与 google 网络字体配套。
   • 可能可以用来延迟组件加载，直到使用其事件加载字体？
   • 需要组件外部的东西来了解字体。
     • 没有明显的方法可以向下伸手并拉出 CSS。

Answer 1

根据您要加载的字体数量和大小，您可以做一些事情。

1. 调用基本 HTML 文件中的字体(与您的其他 CSS 分开)以便浏览器识别它们。然后在父组件中创建一个隐藏的 div，CSS 调用子组件的字体。这将导致浏览器在加载子组件之前请求字体。

2. 使用 rel='preload' 或 rel='prefetch' 在 HTML 中单独加载所有字体。我会在 HTML 的底部执行此操作，这样您就不会阻止其他内容。

3. 使用 CSS Font Loading API 在 created 生命周期 Hook 中加载您的字体.我不确定这与 Google Fonts 和自托管的效果如何。

4. 在加载内容时创建 CSS 过渡，例如半秒淡入淡出以掩盖 FOUT。这显然不是解决方案，但永远不要低估烟雾和镜子对您的应用体验的影响。

此外，您应该尝试使用 font-display ( docs ) CSS 属性。这不会解决问题，但会使结果更可预测。