我有一个使用 Angular 4 开发的大型应用程序，似乎存在一个渲染问题，正如这篇文章 Angular 2 Chrome DOM rendering problems 中提到的那样 .当我使用路由器从一个组件导航到另一个组件时 ，虽然这个问题已经有了答案，但我仍然无法解决这个问题。
我的应用结构如下:
app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)
每个选择器都导入用于 import @font-face 的相同 mixin 文件，而上述帖子中提到的解决方案建议使用父组件并使用 ViewEncapsulation.NONE ，我不能做同样的事情，因为在每个组件 app-home、app-main、app-sub 和后续子组件中都使用了导入的字体。当我从 .less 文件中删除 @import 语句时，出现类似
Variable @helvetica-bold is undefined
当我从一个组件路由到另一个组件时，是否有一种解决方法可以使我的文本在 chrome 中正常显示。
最佳答案
您需要确保只调用一次字体导入。 因此，您应该从 mixin 文件中删除所有导入的字体，因为您已经在答案中尝试过。
但是，您还需要确保字体本身仍然存在于您的应用程序中，所有 View 都可以访问它。您可能有一个类似“app.less”或类似文件的文件，其中包含可在您的应用程序的所有部分中使用的样式。从你的 mixin 中删除字体导入，并将其放在这个文件中(确保路径引用仍然有效，它们可能需要调整)。如果您还没有这样的文件，则需要创建一个并在应用启动时加载一次。
关于css - 由于@Font-Face 在 Chrome 中呈现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50293111/