text - 使用@font-face 时，SVG 文本边界框因浏览器而异？

Question

我试图通过使用 getBBox() 方法获取边界框，根据文本的宽度和高度放置一个 SVG 文本元素。

如果文本使用网络安全字体，这在不同的浏览器中运行得相当好，但如果文本使用@font-face 和自定义网络字体设置样式，则文本的宽度在 Firefox (Mac) 和 Safari 中返回不正确( IOS)。
它在 Safari (Mac) 和 Chrome (Mac) 中都能完美运行。

如果灰色框与文本的宽度相同，则它可以在该浏览器中使用。

有人知道如何在所有浏览器中获得文本边界框的正确宽度吗？

Answer 1

浏览器在完成加载/应用之前计算 BBox @font-face ， 尝试...

onreadystatechange="if(document.readyState == "complete"){init()}"

document.readyState在三个状态触发: loading (加载页面时)， interactive (当它完成解析但仍在加载资源时)和 complete (当浏览器真正完成时)，所以你只需添加一个条件来执行 init()当 document.readyState已完成。