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

Posted 2023-03-28

【中文标题】使用 @font-face 时 SVG node.getBBox 不正确

【英文标题】：SVG node.getBBox incorrect when using @font-face

【发布时间】：2017-04-14 03:43:37

【问题描述】：

我有一些使用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 返回反映其显示字体的大小？我怀疑这是一个内部时间问题。这几乎就像后期渲染需要回调/事件。

【参考方案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())
  )