google-chrome - 在标题和段落上使用 optimizeLegibility 时，Chrome 会随机显示不可读的单词

Question

编辑:我们找到了导致此问题的原因和解决方案。阅读所选答案以获取更多信息。

原始问题:
我遇到了这个奇怪的问题，其中某些单词的文本无法正确呈现，显示完全无意义的单词或符号，而不是我放入 html 中的单词，尽管检查代码一切都是它应该的样子，控制台中没有错误，没有任何问题(显然)。

首先，问题:

以下是文本在我的页面上的显示方式:

这是刷新时的显示方式:

当我放大或缩小页面时，它会自行修复，直到下次刷新。 我使用谷歌网络字体(任何感兴趣的人都可以使用“Cabin”)，但这似乎不是问题，因为我尝试了不同的字体，但没有成功。

我还在页面中包含一些第三方 JavaScript(jquery.js、underscore.js、backbone.js、handlebars.js、foundation.js、jquery.cookie.js、i18next.js)和一堆专有 js文件。
我尝试一一禁用它们，当我禁用所有它们时，问题就消失了。(可能有冲突？)

我在办公室的不同电脑/笔记本电脑上测试了该页面，在本地和在线进行了尝试，但问题仍然存在。

我在这里读到一个关于 SO 的问题(找不到链接)，其中用户遇到文本渲染问题，并使用 CSS 属性修复了它 -webkit-transform:translateZ(0); 但是看起来这不是我的情况。

对于有值(value)的内容，这是我的 HTML:

<div class="footer-story full-width">
<div class="footer-story-row">
    <h5>SUGGESTED</h5>
    <div class="columns large-6">
        <img src="http://lorempixel.com/120/120" alt=""/>
        <div class="inline-top">
            <h5><a href="">This is the title of the article</a></h5>
            <p>by <a href="">RandomUsername</a></p>
        </div>
    </div>
</div>
</div>

以及涉及的CSS(不是全部):

.footer-story {
  width: 100%;
  max-width: 100%;
  height: 400px;
  background-color: gray;
  padding-top: 15px;
}
.footer-story .footer-story-row h5 {
  color: white;
  border-bottom: 1px solid #ffffff;
}
.inline-top .footer-story .footer-story-row h5 {
  border-bottom: 0px !important;
}

现在我不知道如何寻找这个问题的解决方案，因为我看不到问题产生的位置，也无法重现它供您查看和使用。

我假设这是一个 Chrome 错误，因为在 Firefox 上一切正常，但我在任何地方都找不到类似的东西，所以我希望你们中的一些人至少能给我指出正确的方向来找到解决方案。
谢谢

Answer 1

我能够通过使用 webfontloader 来解决这个问题加载谷歌字体。

而不是:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500">

使用这个:

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Roboto:300,400,500']
    }
  });
</script> 

参见:https://github.com/typekit/webfontloader#get-started