@ Font-faceとoffsetWidth属性の値が間違っています

最新バージョンのChromiumでこの問題が発生しました。 @ font-faceで埋め込まれたフォントファミリを使用して最初の要素を作成した後、間違ったoffsetXyz値が渡されています。スクリプトが実行されるまでに、window.onloadフックはすでに起動されており、フォントは既に読み込まれています。@ Font-faceとoffsetWidth属性の値が間違っています

これは、スクリプトは（概略的に）次のようになります。

var e = document.createElement("span"); 
e["innerText" in e?"innerText":"textContent"] = "fooBar"; 
e.style.fontFamily = "fontFaceEmbeddedFontFamily"; 
document.body.appendChild(e); 

alert(e.offsetWidth); // Returns two different values 
setTimeout(function() { 
    alert(e.offsetWidth); // The latter being correct 
}, 1000);

値は「黙って」に更新されます。値を修正するのを待つ方法がないようですが、単純にsetInterval - 値をチェックしてから、ソリューションをレンダリングします。私はそのような汚いものをやっているとは思わない。

今後の進め方についてご意見がありますか？ src: local(" ... ")が指定されていない場合にのみ発生し、問題はダウンロードされます（フォント固有）。

出典

2011-05-13 Witiko

はたぶん、あなたはいくつかの助けをここに見つけることができます：http://paulirish.com/2009/fighting-the-font-face-fout/ - 一部のブラウザでは、フォントがダウンロードされて切り替えられるまで「非スタイル」のテキストを表示するのが一般的です。 – James

まあ、私が言ったように、フォントは、**後** ** window.onloadイベントが発生したときにスクリプトを実行するときに読み込まれているはずです。要素が文書の本文に追加されると、既に読み込まれ、視覚的に適用されます。ちょうどオフセット値が間違っています。 – Witiko

あなたはすでに自分で答えを与えています。 src: local()と設定してください。通常、@font-faceを使用するときはbulletproof syntaxに固執します。ここであなたの頭のようなブラウザの問題を克服するためです。

出典

2011-06-19 11:43:39

私は知っているほとんどの年ですが、私もこの問題を抱えて、原因を発見するために半日かかりました。タイムアウトを使用する代わりに、ページ全体が読み込まれるまで待つことができます。 src: local()は私のために何の違いもありませんでした。

<body onload="finished()">

やjQueryの中を：だから、あなたが使用することができます

$(window).load(
    function() { 
     // this only will execute when the entire page is loaded. 
    } 
);

出典

2012-01-22 07:28:37 hugotacito

2番目のアプローチ（** BODYタグには入れない**のように）を使うのはよかったですか？ –

@ Font-faceとoffsetWidth属性の値が間違っています

答えて

関連する問題