css - 在 Chrome 中使用 font-face 时出现奇怪的字长问题

Question

我有一个非常奇怪的问题，在 Chrome 中查看网站时偶尔会发生。您可以在下图中看到发生的问题:

它看起来像一个溢出/断字/换行 CSS 问题，但它绝对不是。我知道这一点，因为如果我在 Chrome 的开发控制台中将字体更改为标准字体，如 Helvetica，它会自行排序并恢复正常，如下所示:

如果我将它改回 font-face 类型，那么一切正常!这是一个很奇怪的问题。它只是偶尔发生，我还没有看到它发生在除 Chrome 之外的任何浏览器中。看起来 Chrome 正在努力使用字体或其他东西来计算单词的长度。它也发生在页面上的每个元素上，而不仅仅是上图中的段落。

这是字体的 CSS:

@font-face {
    font-family: 'gotham_lightregular';
    src: url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.eot.txt');
    src: url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.eot.txt?#iefix') format('embedded-opentype'),
         url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.svg.txt#gotham_lightregular') format('svg'),
         url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.ttf.txt') format('truetype'),
         url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.woff.txt') format('woff');
    font-weight: normal;
    font-style: normal;
}

编辑

This is the site I am working on.但我不确定它是否会有所帮助，因为问题目前没有发生，当它发生时很难发现它。

Answer 1

我遇到了同样的问题，发现它与我的 css 文档中的这个样式 block 有关:

* {
    /* optimize text for legibility */
    text-rendering: optimizeLegibility;
}

我能够通过删除有问题的 css 然后添加这段 jQuery 代码来解决它:

$(function() {
    $("body").css("text-rendering", "optimizeLegibility");
});

我认为一定是 Chrome 中的渲染问题导致了这种情况，但在 DOM 准备好后应用优化易读性样式似乎可以解决问题。