0

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

这是正在发生的问题

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

恢复正常

如果我将它改回字体类型，那么一切正常！这是一个非常奇怪的问题。它只是偶尔发生，我还没有在 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;
}

编辑

这是我正在开发的网站。但是我不确定它是否会有所帮助，因为问题当前没有发生，当它发生时很难抓住它。

4

1 回答 1

0

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

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

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

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

我认为 Chrome 中一定存在导致此问题的渲染问题，但在 DOM 准备好后应用 optimizeLegibility 样式似乎可以解决问题。

于 2015-05-26T22:19:57.933 回答