offsetWidth、SVG 宽度在使用加载的字体时不正确

Question

编辑 - 最初认为这只是一个 SVG 问题，但似乎适用范围更广。

我正在尝试在 SVG 中绘制一些文本，然后在 SnapSVG 的右侧放置一个带有填充的矩形。这适用于任何网络安全字体。但是，当我从 google 导入字体时， .getBBox() 返回错误的宽度。 SO 的 web sn-ps 似乎没有复制问题，所以我在这里输入了代码，但要查看实际问题，您需要转到下面的 codepen。

var testsvg = Snap('#test')
testsvg.rect(0,0,400,400).attr({})
var pretext=testsvg.text(100,50,'I am the very model of').attr({fill:'white','font-family':"Asap"})
var text=testsvg.text(100,100,'I am the very model of').attr({fill:'white','font-family':"Asap"})
console.log(text.getBBox().width)
var boundrect=testsvg.rect(100,100-text.getBBox().height,text.getBBox().width+10,text.getBBox().height).attr({stroke:'white',fill:'none'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<style>
	@import url('https://fonts.googleapis.com/css?family=Asap');
</style>

<svg id='test' height='400' width='400'></svg>

这是代码笔：https://codepen.io/austinclemens/pen/WKZayE

您会注意到矩形的宽度应该是文本宽度 + 10，但它最终没有完全包围该框。如果您将文本更改为 Arial，它将立即生效。此外，如果您将文本更改为 Arial 然后再改回 Asap，突然 Asap 会起作用。我在 Safari、Chrome 和 Firefox 中遇到了这个错误。在执行 JS 之前添加 window.onload() 似乎没有帮助，也没有使用任意等待。

所以我怀疑这与字体加载有关。我想也许我可以通过“初始化”字体来修复它，可以说先做一个不同的文本对象，但这并没有帮助。我可以使用 HTML 解决方案，但在我的实际应用程序中会非常麻烦，所以如果可能的话，我想让它只使用 Snap。我实际上也不认为这是一个快速问题。查看 snap 的 getbbox 函数，它使用 this.node.getClientRects() 获取文本，此处返回错误的宽度。

Answer 1

根据 LGSon 的推荐帖子，我使用 fontfaceobserver 通过加载带有承诺的字体来解决此问题：https://github.com/bramstein/fontfaceobserver