Material Design 图标闪烁(FOUT?)

问题描述 投票:0回答:3

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

angularjs angular material-design flicker icon-fonts
3个回答
3
投票

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

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


1
投票

我能够使用 WebFontLoader

解决我的问题

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.