SVG node.getBBox使用@ font-face时不正确

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中使用@font-face ，这会导致在任何SVG渲染之前触发字体下载。

我已经尝试在页面加载之前将@font-face添加为@font-face声明，但没有任何区别。

如何获取SvG返回反映其显示字体的大小？ 我怀疑这是内部计时问题。 几乎就像需要后期渲染的回调/事件一样。

Answer 1

好。 发布答案，以防对其他可怜的灵魂有用。

确实有@ font-face加载事件的一些实现。

这是一篇很好的文章 。

跨浏览器的支持仍然很不稳定，但是Font Face Observer看起来像一个很有前途的库：

• https://github.com/bramstein/fontfaceobserver

同样有趣的是：

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

某些浏览器本身支持这些事件。 渲染文本后，我可以调用：

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