@ font-faceを使用するとSVG node.getBBoxが正しくない

Question

Raphael.text()を使用してレンダリングされるテキストと、@ font-faceを使用してロードされたフォントを使用するfont-family属性を持つテキストがあります。

私はOpenTypeを使ってフォントを読み込み、それをbase64としてレンダリングし、それを自分のスタイルシートに挿入します。

// In my css 
opentype.load('someFontFamily', (err, font) => { 
    // Inject in stylesheets 
    const path = paper.text(x, y, 'Hello World') 
    .attr({ 
     'font-family': 'someFontFamily' 
     'font-size': 100 
    }) 
    path.getBBox() // Calls path.node.getBBox() in RaphaelJS 
}) 

問題はこれです：

はここにいくつかの擬似コードです。 getBBoxによって保持されるサイズ、特に幅は、フォントファミリを反映するのではなく、抽象的な未知の汎用フォントの代わりに使用されます（フォールバックフォントの幅ではありません）。

html /ページは、SVGに目的のフォントを正しく表示しています。私はそれを検査することができ、ブラウザは正しいサイズを見る。

これは待ち時間の問題ではなく、タイムアウトを試しました。フォントがブラウザにプリロードされている場合（ページをファミリを使用して、CSSをレンダリングする前にフォントダウンロードのトリガを引き起こす私のCSS内に@font-faceを使用することによって、フォントがプリロードされている場合）。

私は前ページの読み込みに@font-face宣言としての私のフォントを追加しようとしましたが、それは何の差分を行いません。

は、私は、SVGはそれが表示されるフォントを反映したサイズを返すために取得できますか？私はそれが内部タイミングの問題だと思う。それはですポストレンダリングのコールバック/イベントの必要性とほぼ同じです。

Answer 1

[OK]をクリックすると、他の悪い魂に役立つことがわかります。

実際には、@ font-faceロードイベントの実装がいくつかあります。

ここでは、この上に良いarticleです。

クロスブラウザのサポートはまだあやふやですが、フォントフェイスオブザーバーは、有望なライブラリのようになります。

関心のも
• https://github.com/bramstein/fontfaceobserver

は次のとおりです。

• https://github.com/zachleat/fontfaceonload

一部のブラウザでは、これらのイベントをネイティブにサポートしています。テキストをレンダリングした後、私は電話することができます：

document.fonts.load('70px someFontFamily') 
    .then(function() { 
    console.log(path.node.getBBox()) 
    })