Text 使用@font-face时，不同浏览器的SVG文本边界框不同？

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

如果文本使用websafe字体，这在不同的浏览器中运行良好，但如果文本使用@font-face和自定义webfont进行样式设置，则在Firefox（Mac）和Safari（iOS）中返回的文本宽度不正确。 它在Safari（Mac）和Chrome（Mac）中都能完美工作

如果灰色框与文本具有相同的宽度，则它在该浏览器中工作

---

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

浏览器在加载/应用完

@font-face

之前正在计算BBox，请尝试

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

---

document.readyState

在三种状态下触发：

加载

（当页面加载时）、

交互

（当它完成解析但仍然加载资源时）和

完成

（当浏览器真正完成时），因此您只需添加一个条件来执行

init（）

当

文档.readyState

完成时。

今天我遇到了类似的问题。Duopixel认为getBBox（）可能返回动量度量，这可能是意外的，因为尚未加载外部字体，而是使用了一些标准字体

WebKit中的问题（在Chrome 24.0.1312.52和26.0.1389.0 canary中测试）是浏览器延迟外部字体加载，直到它首次在页面上的任何位置有效使用。因此，即使您等待onreadystatechange变为“完成”，也不能保证在调用getBBox（）时准备好字体度量-您可能仍然是第一个呈现外部字体样式的文本的人，将其插入文档并立即对其调用getBBox（）（我的案例）

我的解决方法不是直接调用mySVGInitCode（），而是：

$("body").append(
  $("<div/>")
    .attr("class", "force-external-font-loading")
    .attr("style", "font-family: \"xkcd\";visibility:hidden;position:absolute")
    .text("x")
  );
setTimeout(function(){ mySVGInitCode() }, 100); // 100ms is just arbitrary waiting time which should be sufficient for fetching the external font on a fast network, anyone has a better solution?

$（“正文”）.append(
$("")
.attr（“类”，“强制外部字体加载”）
.attr（“样式”，“字体系列：\”xkcd\“可见性：隐藏；位置：绝对”）
.文本（“x”）
);
setTimeout（函数（）{mySVGInitCode（）}，100）；//100ms只是任意的等待时间，在快速网络上获取外部字体应该足够了，有人有更好的解决方案吗？

---

正如您所看到的，我动态插入绝对定位的样式文本，以强制外部字体加载（可见性：隐藏在这里很重要，而不是显示：无）。然后，在执行可能呈现某些内容的SVG代码之前，我会等待一段时间，然后立即询问指标。

谢谢您的建议！事实上，我今天早些时候也有同样的想法，所以我已经将该测试添加到了示例中，并且效果良好！