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

Question

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

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

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

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

Answer 1

浏览器在完成加载/应用之前计算边界框@font-face，假设您不需要 IE，您可以将 BBox 计算函数包装在 Promise 中document.fonts.ready...

document.fonts.ready.then(() => const bbox = textEl.getBBox());

这是一个展示问题和解决方法的工作示例：

document.fonts.ready.then(() => const bbox = textEl.getBBox());

const xmlns = "http://www.w3.org/2000/svg";
const correct = document.getElementById("correct");
const incorrect = document.getElementById("incorrect");

visualizeBBox(incorrect);
document.fonts.ready.then(()=> visualizeBBox(correct));


function visualizeBBox(el){
  const bbox = el.getBBox();
  const rect = document.createElementNS(xmlns, "rect");
  for (prop in bbox) rect.setAttribute(prop, bbox[prop]);
  document.querySelector("svg").appendChild(rect);
}

svg text {
  font-family: 'Diplomata SC', serif;
}

svg rect {
   stroke: red;
   fill: none;
}