@ Font-Face导致Chrome中的渲染问题

Question

我有一个使用Angular 4开发的大型应用程序，似乎是一个完全如本文Angular 2 Chrome DOM rendering problems中提到的渲染问题 。当我使用路由器从一个组件导航到另一个组件时  虽然这个问题已经有了答案，但我仍然无法解决这个问题。

我的申请结构如下：

stopwords

每个选择器导入用于app-home --- > app-main --- > app-sub --- > <router-outlet> (contents) 的相同mixin文件，而上述帖子中提到的解决方案建议使用父组件并使用 ViewEncapsulation.NONE ，我不能做同样的事情，因为在这些组件app-home，app-main，app-sub和后续的孩子中都使用了导入的字体。当我从.less文件中删除@import语句时，我得到一个像

这样的异常

import @font-face

当我从一个组件路由到另一个组件时，是否有解决方法使我的文本在chrome中正常显示。

Answer 1

您需要确保仅调用一次字体导入。 因此，您应该像在答案中尝试的那样从mixin文件中删除所有字体导入。

但是，您还需要确保字体本身仍然存在于您的应用中，所有视图都可以访问它。你可能有一个类似于＆＃39; app.less＆＃39;的文件。或类似的东西，包含应用程序所有部分都可用的样式。从mixin中剪切字体导入，而不是将其放在此文件中（确保路径引用仍然有效，可能需要调整它们）。如果您还没有这样的文件，则需要创建一个并在app start上加载一次。