如何解决角度中无样式文本的闪光?

Question

首次加载任何路由时，我的custom font和material icons分别切换为默认字体和文本。如何在Angular 5 app中消除这种行为？

Answer 1

对于遇到此问题的其他任何人，我发现mat-icon组件都是使用我在项目中设置的更高级别设置的默认字体加载的(在我的情况下，这是 Open Sans)。然后，只有在Material Icons字体系列完成加载后，图标才会出现。

我通过专门将字体系列设置为在更高级别的所有mat-icon元素上Material Icons来解决此问题。

.mat-icon, mat-icon {
font-family: 'Material Icons' !important;
}

虽然我通常建议不要在 CSS 中使用!important- 但这似乎是一个使用它的合理位置，因为如果您想防止无样式文本的闪烁，除了Material Icons字体之外，没有其他字体应该加载这些图标。