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

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/页面以所需的字体正确地显示了我的SVG。我可以检查它，浏览器会看到正确的大小。

这不是等待的问题，我已经尝试过暂停。似乎它唯一的工作方式是在浏览器中预先加载字体(通过在页面上有一个元素，使用家族并在我的css中使用@font-face，这会在任何SVG呈现之前触发字体下载。

我试着在页面加载之前添加我的字体作为@font-face声明，但是没有什么不同。

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

Answer 1

好的。张贴一个答案，以防它对其他可怜的灵魂有用。

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

这是一个很好的article。

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

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

同样值得关注的是：

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

一些浏览器本身就支持这些事件。在呈现文本之后，我可以调用：

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