2016-05-10 14 views
3

Chromeで奇妙なテキストレンダリングの問題が発生しています。ブラウザで再描画が発生するまでテキストがレンダリングされないことがあります。再描画するまでChromeでGoogleフォントがレンダリングされない場合があります

は、ここで問題

のスクリーンショットだと、これはそれが見えるようにするとしているものです。それが失敗しない場合、私はdevのツールを開くよう

correct rendering

、とすぐに、フォントが正しくレンダリングされます。

すでに開いているdevツールで問題が発生した場合、font-sizeを変更するとテキストが表示されます。

十分に興味深いことに、フォントサイズを戻すと、テキストは再び消えます。 EG:

$('p').css('font-size', 12); // Text appears 
$('p').css('font-size', 13); // And its gone again. 

Googleフォントを削除すると、問題は完全に消えます。これは私のフォントリファレンスです、私はここに何か間違っているとは思わない?

<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'> 

私は私の問題hereのように見えるもののためにバグレポートを見つけたが、Chromeで固定して、それがマークされてい34+と私は他のブラウザでこれを複製することはできません49

を実行していますよ。

正しい方向に私を向けることができる人がいるのが好きです。それ以上の情報が必要なら私に知らせてください!

答えて

2

数時間の頭痛の後、私は自分の問題を見つけたと思う。

私が投稿したスクリーンショットのすぐ下に、埋め込まれたYoutubeビデオがあります。私たちがやっているのと同じフォントを使っています(Roboto)。私がYoutube iframe またはを削除したときに、私たちのアプリフォントが別のGoogleフォントに変更されました。問題はなくなりました。フォントをダウンロードするときに何らかの矛盾があると私は思う。私は本当にわからない。

私は、リンクタグの代わりに、ページの下部にJavaScriptを使用してRobotを動作させることになりました。どのデザインの人を幸せにしたか:

関連する問題