Material Design 图标闪烁（FOUT？）

Question

我在 Angular 2 应用程序上注意到，在 IE 11 中，我所有的材料设计图标都会在显示实际图标之前闪烁文本。有针对这个的解决方法吗？有没有办法使用某种预加载器？

Answer 1

解决此问题的一个极其简单的方法是将

display=block

附加到 URL 末尾。

例如：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet" />

请参阅此处的评论：https://github.com/angular/components/issues/12171#issuecomment-769333603

Answer 2

我能够使用 WebFontLoader

解决我的问题

“材质图标”字体。然后使用 CSS，一旦加载了所有图标，我就可以选择并淡入它们

Answer 3

实际上，这是预期的行为（请看第一条评论这里）。但如果您想在加载图标之前不显示任何内容，您可以使用此issue中提到的解决方案之一。