直到 window 在 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 中增加字体大小百分比，除非加载第一个组件，否则字体不会显示。我一切换页面，它就消失了。但是，如果我调整 window 的大小，它就会显示出来。

这只发生在 chrome

Answer 1

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

Answer 2

Chrome 利用 @font-face kit 中的 .svg 文件，不应最后调用它。尝试像这样重新安排您的代码：

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

将url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg')放在第一行。

主要的解决方案是在这个网站上找到的：Font Face Rendering on Chrome

Answer 3

尝试使用静态 css（样式标签或 link）而不是组件样式来加载字体。

Answer 4

尝试在没有

的情况下使用它

 font-weight: normal;
  font-style: normal;

Answer 5

尝试将 webkit 浏览器定位为仅从 svg 来源加载字体

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: ‘bpmonoregular’;
    src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format(‘svg’);
  }
}

In depth article here

Answer 6

尝试将您的字体转换为 .woff 并像这样导入：

@font-face {
    font-family: "FontName";
    font-weight: normal;
    font-style: normal;
    src: url("/persist/fonts/FontName.woff") format("woff");
}

直到 window 在 chrome 中调整大小后字体才会显示

Font doesn't show until window resize in chrome

css

google-chrome

font-face

webpack