0

Chromeでサイトを表示しているときに時々発生する非常に奇妙な問題があります。下の画像で問題が発生していることがわかります。

これが起こっている問題です

オーバーフロー/ワードブレイク/ワードラップCSSの問題のように見えますが、そうではありません。Chromeの開発コンソールでHelveticaのような標準フォントにフォントを変更すると、それ自体がソートされ、以下のように通常に戻るため、私はこれを知っています。

通常に戻る

font-faceタイプに戻すと、すべて問題なく動作します。これは非常に奇妙な問題です。たまにしか発生しませんが、Chrome以外のブラウザでは発生していません。Chromeはフォントなどを使用して単語の長さを計算するのに苦労しているようです。これは、上の画像の段落だけでなく、ページ上のすべての要素でも発生します。

これはfont-faceの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 に答える