Question

最近，我发现了一些奇怪的事情，仅在Chrome中发生（我目前的版本是58）。

这有点难以解释，所以我确保在我的文字解释之外加入清晰的动画来展示真实情况：

<h1>文字是可见的，请注意计算出的颜色是#222，内容高于（我的意思是，它看起来不像z-index个错误）。但是，除非我调整页面大小或使用devtools进行一些修改，否则文本是不可读的。它可以被选中/突出显示。

应用程序是使用Angular构建的，如果它可以以任何方式提供帮助，并且我没有使用任何类型的DOM封装，例如Shadow DOM。

Answer 1

我正在使用一组共享样式（例如 - colors.scss），我在大多数模块中导入它。

home.module.ts - ＆gt; home.component.ts - ＆gt; home.component.scss

@import "../shared/colors.scss";

其中一个共享样式表是typography.scss，其中包含以下（仅显示相关位）：

@font-face {
  font-family: "Sawasdee";
  src: url("/assets/fonts/sawasdee.ttf") format("truetype");
}

重复导入字体导致屏幕闪烁，所以我所要做的就是确保它只被加载一次（并在应用程序的开头）。

所以我只是将字体导入移动到主模块scss中 - ＆gt; app.component.scss