Css 由于@Font-Face，Chrome中出现渲染问题

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

我的申请结构如下：

app-home --- > app-main --- > app-sub --- > <router-outlet> (contents)

---

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

您需要确保字体导入只调用一次。 因此，您应该从mixin文件中删除所有字体导入，正如您在回答中已经尝试过的那样

---

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

你能详细说明一下，它现在应该是什么样子，在chrome中是什么样子吗？原始文本在DOM中显示，但隐藏在视图中，就像这里给出的示例一样，只有helvetica粗体有这个问题，或者其他字体？@import mixins文件中的所有字体您能确认这些字体只导入一次吗？搜索整个项目中的字体名称，包括所有插件。也许一些插件同时也在导入字体。我有大约45个组件，并且在其.less文件中为每个组件自定义了一些常用样式，因此我认为将它们放在一个通用文件中是不可行的。您应该只将字体导入放在一个通用文件中，而不是所有样式中。由于这是Chrome中记录在案的错误，而且确实是由于多次导入同一字体造成的，因此除了删除额外的导入之外，目前没有解决方法。另外，您不是说所有文件都使用相同的mixin吗？他们可能没有这个mixin文件的自己的副本，所以您只需要从那里剪切导入一次，然后将其粘贴到公共文件，而不是45次。

Variable @helvetica-bold is undefined