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 中。

- Josh Elias

---

嘿，我怀疑我的 Chrome 有和你一样的问题。你有没有可能在其他地方重现你的问题，让我试试？ - AVAVT

Windows 10操作系统？ - seidme

我们在一个非常大的应用中也遇到了同样的 bug。这个问题是在升级到 Angular 2 的正式版本（非测试版）或升级到 webpack 2 后开始出现的（我们不确定是哪个引起了这个问题）。不管怎样，我们还没有找到解决你所描述问题的方法（某些文本内容只有在调整窗口大小或手动使用开发者工具修改 CSS 后才会显示）。 - Juraj Mlich

嗨，我在最新版本的Angular上遇到了同样的问题，有人找到解决方案了吗？谢谢！ - JackKalish

Answer 1

您可以在文档.ready上使用代码尝试触发一个window.resize作为解决方法。

- Mr. Hugo

Answer 2

尝试使用静态 CSS（style 标签或链接）加载 font-face，而不是组件样式。

- kemsky

Answer 3

Chrome使用.svg文件在@font-face kit中，不应该最后调用。尝试重新排列你的代码：

@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')放在第一行。

主要解决方案可以在这个网站上找到：Chrome上的字体渲染

- ZombieChowder

Answer 4

尝试在不使用它的情况下使用它

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

- John Doe

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’);
  }
}

这里有一篇深入的文章

- Vishu

Answer 6

尝试将您的字体转换为.woff格式，然后像这样导入：

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

- Marco Salerno