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。

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

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

1 个答案: