Chrome 在 headers 和段落上使用 optimizeLegibility 时随机显示不可读的单词

Question

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

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

首先是问题：

文本在我的页面上的显示方式如下：

刷新时是这样的：

当我放大或缩小页面时，它会自行修复，直到下一次刷新。我使用 google 网络字体（"Cabin" 适合任何感兴趣的人）但这似乎不是问题，因为我尝试了不同的字体但没有成功。

我还在页面中加入了一些第三方 javascript (jquery.js, underscore.js, backbone.js, handlebars.js, foundation.js, jquery.cookie.js, i18next.js) 和一堆专有的 js 文件。
我试着一个一个地禁用它们，当我禁用所有它们时问题就消失了。（可能有冲突？）

我在我办公室的不同 pc/laptops 上测试了该页面，尝试了本地和在线，但问题仍然存在。

我在这里读到一个关于 SO 的问题（找不到 link），其中用户遇到了文本呈现问题并通过 CSS 适当 -webkit-transform: translateZ(0); 修复了它，但看起来像这不是我的情况。

为了什么值得，这是我的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 加载 Google 字体来解决这个问题。

而不是：

<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

Answer 2

好的，我们终于找到问题所在了：

Foundation 默认将 text-rendering:optimizeLegibility 放在所有 <h> 和 <p> 上。

看起来像这样 css 属性在 chrome 中的表现确实有问题，您可以在此处阅读有关此问题的更多信息：

Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?

https://code.google.com/p/chromium/issues/detail?id=39017

它看起来与上面发布的错误不同，但在不同情况下具有相同的行为。

根据我们的经验，它发生在以下时间：
- 您从 Google Web Fonts
加载自定义字体 - 你在页面中加载了一个或多个 JS 文件
- 您已在文本元素上设置 text-rendering:optimizeLegibility，并且在文本元素

内部或包装中有一个 <a></a>

它真的是随机发生的，而且不容易重现。

解决方案只是将 Foundation 中使用此属性的 SASS 变量设置为 text-rendering:none !default;，然后一切就绪。

希望这对您有所帮助。

Chrome 在 headers 和段落上使用 optimizeLegibility 时随机显示不可读的单词

Chrome is randomly displaying unreadable words when using optimizeLegibility on headers and paragraphs

debugging

google-chrome

text-rendering