由于@Font-Face 在 Chrome 中的渲染问题答案

【问题标题】：Rendering issue in Chrome due to @Font-Face由于@Font-Face 在 Chrome 中的渲染问题
【发布时间】：2018-05-11 13:11:24
【问题描述】：

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

我的应用结构如下：

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

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

Variable @helvetica-bold is undefined

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

【问题讨论】：

您能否详细说明一下，它的外观应该如何以及现在在 chrome 中的外观如何？
原始文本存在于 DOM 中，但从视图中隐藏，就像这里给出的示例 stackoverflow.com/questions/42766830/…
只有黑体字有这个问题，还是其他字体也有问题？
@import mixins 文件中存在的所有字体
你能确认所有字体都只导入一次吗？在整个项目中搜索字体名称，包括所有插件。也许某些插件也在同时导入字体。

标签： css angular less angular2-template angular2-components

【解决方案1】：

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

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

【讨论】：

我有大约 45 个组件，并且在其 .less 文件中为每个组件定制了一些常用样式，所以我认为将它们放在单个常用文件中是不可行的
您应该只将字体导入放在一个通用文件中，而不是所有样式。由于这是 Chrome 中记录的错误，并且确实是由多次导入相同的字体引起的，因此目前除了删除额外的导入之外没有其他解决方法。
另外，你不是说所有文件都使用相同的mixin吗？他们可能没有自己的 mixin 文件副本，因此您只需从那里剪切一次导入，然后将其粘贴到公共文件中，而不是 45 次。