使用@ 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()) 
    })