由于@Font-Face，Chrome 中出现渲染问题
Rendering issue in Chrome due to @Font-Face
我有一个使用 Angular 4 开发的大型应用程序，似乎存在一个渲染问题，与此 post 中提到的完全一样
.当我使用路由器从一个组件导航到另一个组件时
，虽然这个问题已经有了答案，但我还是无法解决这个问题。
我的应用结构如下：
app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)
每个选择器都导入用于 import @font-face 的相同 mixin 文件，而上述 post 中提到的解决方案建议使用 parent 组件并使用 ViewEncapsulation.NONE，我不能做同样的事情，因为在每个组件中都使用了导入的字体 app-home， app-main、app-sub 以及后续的孩子。当我从 .less 文件中删除 @import 语句时，出现类似
的异常
Variable @helvetica-bold is undefined
当我从一个组件路由到另一个组件时，是否有一种解决方法可以使我的文本在 chrome 中正常显示。
您需要确保只调用一次字体导入。
因此，您应该从 mixin 文件中删除所有字体导入，因为您已经在您的答案中尝试过。
但是，您还需要确保字体本身仍然存在于您的应用程序中，所有视图都可以访问它。您可能有一个类似 'app.less' 或类似文件的文件，其中包含可在您的应用程序的所有部分中使用的样式。从你的 mixin 中删除字体导入，并将其放在这个文件中（确保路径引用仍然有效，它们可能需要调整）。如果您还没有这样的文件，则需要创建一个并在应用程序启动时加载一次。
我有一个使用 Angular 4 开发的大型应用程序，似乎存在一个渲染问题，与此 post
我的应用结构如下：
app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)
每个选择器都导入用于 import @font-face 的相同 mixin 文件，而上述 post 中提到的解决方案建议使用 parent 组件并使用 ViewEncapsulation.NONE，我不能做同样的事情，因为在每个组件中都使用了导入的字体 app-home， app-main、app-sub 以及后续的孩子。当我从 .less 文件中删除 @import 语句时，出现类似
Variable @helvetica-bold is undefined
当我从一个组件路由到另一个组件时，是否有一种解决方法可以使我的文本在 chrome 中正常显示。
您需要确保只调用一次字体导入。 因此，您应该从 mixin 文件中删除所有字体导入，因为您已经在您的答案中尝试过。
但是，您还需要确保字体本身仍然存在于您的应用程序中，所有视图都可以访问它。您可能有一个类似 'app.less' 或类似文件的文件，其中包含可在您的应用程序的所有部分中使用的样式。从你的 mixin 中删除字体导入，并将其放在这个文件中（确保路径引用仍然有效，它们可能需要调整）。如果您还没有这样的文件，则需要创建一个并在应用程序启动时加载一次。