angular - 如何解决 Angular 中无样式文本的 Flash？

Question

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

Answer 1

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

我通过在更高级别的Material Icons所有元素上专门设置 font-family 解决了这个问题。mat-icon

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

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