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

【问题标题】：How to solve Flash of Unstyled Text in Angular?如何解决 Angular 中无样式文本的 Flash？
【发布时间】：2017-12-15 00:46:13
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：