css - 在 chrome 中调整窗口大小时字体不显示

Question

我正在使用 angular2 和 webpack。像这样加载我的字体:

@font-face {
  font-family: 'bpmonoregular';
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot');
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix') format('embedded-opentype'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff') format('woff'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf') format('truetype'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

如果在我的 css 中增加字体大小百分比，除非加载第一个组件，否则字体不会显示。我一切换页面，它就消失了。但是，如果我调整窗口大小，它就会显示出来。

这只发生在 chrome 中

Answer 1

作为解决方法，您可以尝试使用 document.ready 上的代码触发 window.resize。