使用@ font-face時SVG node.getBBox不正確

Question

我有一些文本使用Raphael.text()和font-family屬性使用@ font-face加載字體。

我使用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/page正確顯示我的SVG與所需的字體。我可以檢查它，瀏覽器看到正確的大小。

這不是一個等待的問題，我試過超時。看起來，只要是在瀏覽器中預加載字體的唯一方式（通過在頁面上使用該系列元素並在我的css中使用@font-face，在任何SVG呈現之前觸發字體下載）

我試着將我的字體作爲網頁加載前@font-face聲明，但它並沒有差異。

我怎樣才能得到SVG返回的大小反映它顯示的字體？我懷疑這是一個內部定時的問題。這是幾乎就像一個需要回調/事件後渲染。

Answer 1

好吧。發佈一個答案，如果它證明對其他一些可憐的靈魂有用

確實有一些@ 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()) 
    })