Flexslider と呼ばれる JS スライダーを使用していますが、奇妙なテキスト レンダリングの問題を発見しました。画像が次の画像に切り替わると、Google Chrome (Windows/OSX) は Web ページ上のすべてのテキスト要素のフォントの太さを変更するようです。この問題は FF/IE では発生しません。
なぜこれが起こっているのか知っていますか？さまざまなフォントを使用してみましたが、成功しませんでした。違いを確認するには、スクリーンショットの例をご覧ください。
1151 次
5 に答える
3
これは、スライダー スクリプトがハードウェア アクセラレーションによる css 変換を使用しているためです。関係のない要素であっても、Webkit に適用するとアンチエイリアス技術が変更されることが知られています。これを証明するデモがあります：http://jsfiddle.net/378pN/
あなたは本当にそれについて多くをすることはできません. CSS 変換を使い続けたい場合は、ブラウザがテキストをアンチエイリアスする方法を変更する必要があります。以下を追加することで、より細いバージョンを使用するように強制できます（サブピクセルではなく、「通常の」アンチエイリアスだと思います）。
html{-webkit-font-smoothing: antialiased;}
デモ: http://jsfiddle.net/378pN/1/
この方法では、CSS 変換を追加するときにテキストをレンダリングする方法は変わりません。
于 2012-11-25T22:44:44.390 に答える
1
コードを投稿していただけませんか？おそらく閉じられていないタグです。また、スライダーと画像の変化によって要素の高さが変化し、少しだけ動いているため、その下のテキストに影響を与えている可能性もあります。
于 2012-11-19T22:28:53.790 に答える
1
この問題には簡単な解決策があります。たとえば、テキスト レンダリングを変更するimage-sliderがある場合、Slider-Divに以下の CSS コードを使用するだけです。
position: relative;
z-index: 1;
それで全部です ：）
于 2014-04-03T11:43:29.143 に答える
0
コードを見ないとわかりにくいです。私の推測では、適切に閉じられていないタグです。W3 バリデーターでページを実行し、見つかったエラーを修正する必要があります。それでも問題が解決しない場合は、さらに情報を提供する必要があります。
于 2012-11-19T20:06:16.207 に答える
0
フレックススライダーが css3 トランジションを使用している場合は、 -webkit-transform: translateZ(0); を試すことができます。エイリアシングを変更しているテキスト要素について、これは私が Fotorama.js と呼ばれる別の js スライダー プラグインで経験していた同様の問題を修正するのに役立ちました
于 2012-11-21T14:26:45.380 に答える