html - 如何防止图像在加载时移动内容？

Question

我遇到字形和图像问题 on my website .当我将它们放在 float 内容中时，它们会在它们旁边的文本之后加载，并在页面刷新时导致所有内容发生变化。

Video demonstration (将鼠标移出视频播放器，菜单将在几秒钟后消失)。

如何防止这种转变发生？

Answer 1

如果我没记错的话，这些图标来自网络字体。

在它们加载之前，您会得到一些垃圾(空方 block 或其他东西)，因为浏览器无法显示它。

一个解决方案可能是尝试在 CSS 中设置图标的宽度(可能是 min-width)——请记住，您最有可能设置 :before 元素的样式，而不是元素本身。请参阅用于它的 CSS 以供引用。