在 chrome 中调整窗口大小之前，字体不会显示

Posted 2023-03-06

【中文标题】在 chrome 中调整窗口大小之前，字体不会显示

【英文标题】：Font doesn't show until window resize in chrome

【发布时间】：2017-01-18 20:37:00

【问题描述】：

我正在使用 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 中

【问题讨论】：

你好，我怀疑我的 Chrome 和你有同样的问题。你有没有机会在我可以玩的地方复制你的问题？

Windows 10 操作系统？

我们在一个非常大的应用程序中也遇到了同样的错误。它是在升级到 Angular 2 的完整（非 beta）版本或升级到 webpack 2 之后开始的（我们不确定是什么原因造成的）。无论如何，我们还没有找到您所描述问题的解决方案（某些文本直到您调整窗口大小或使用开发人员工具手动修改 css 才会显示）。

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

【参考方案1】：

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

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

【参考方案2】：

尝试定位 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

【参考方案3】：

尝试不使用它

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

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

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