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

Question

我有一些文本是使用 Raphael.text() 渲染的，并且具有使用使用 @font-face 加载的字体的 font-family 属性。

我使用 OpenType 加载字体并将其呈现为 base64，然后将其注入(inject)到我的样式表中。

这是一些伪代码:

// 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 返回的大小，尤其是宽度，并不反射(reflect)字体系列，而是一些抽象的未知通用字体(它不是后备字体的宽度，所以不确定它是什么)。

html/页面正确显示我的 SVG 和所需的字体。我可以检查它，浏览器会看到正确的大小。

不是等待的问题，我试过超时。如果在浏览器中预加载字体，这似乎是唯一可行的方法(通过在页面上使用 family 元素并在我的 css 中使用 @font-face 这会触发在任何 SVG 渲染之前下载字体。

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

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

Answer 1

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

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

这是一个很好的article对此。

跨浏览器支持仍然不确定，但 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())
  })