Html 如何使用DevTools查看SVG中使用的字体？

我试图找出放置在谷歌地图表面上的SVG标记中使用的字体。具体来说，

9

位于中的蓝色标记上

标签设置有以下属性：

label: {
    text: "9",
    color: "white",
    fontWeight:"bold"
},

但是，当我使用Chrome或Firefox将标记归零时，无论

fontWeight

属性设置为什么，我都会得到相同的字体大小

---

有没有办法做到这一点？

谷歌地图的做法完全是鬼鬼祟祟的。为了防止用鼠标选择数字，SVG图标（即不带数字的蓝色圆圈）被绘制在一个较低的层中，数字位于上方，然后图标再次呈现在顶部，但不透明度为

opacity=“0.01”

。如果您尝试使用开发人员工具选择标记，那么最终将进入更高的层，并且根本看不到DOM节点的编号

您选择的图标位于带有

z-index:3

的图层中。前面的两个同级元素是一个具有

z-index:1

的div（两者都没有类也没有id，因此在代码中进行选择很尴尬）。里面是保存标记和数字9的元素：

<div style="width: 32px; height: 32px; overflow: hidden; position: absolute; left: -16px; top: -16px; z-index: 0;">
  <img alt="" src="data:image/svg+xml;utf8,..." draggable="false" style="position: absolute; left: 0px; top: 0px; width: 32px; height: 32px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
  <div style="height: 100px; margin-top: -50px; margin-left: -50%; display: table; border-spacing: 0px;">
    <div style="display: table-cell; vertical-align: middle; white-space: nowrap; text-align: center;">
      <div style="color: white; font-size: 14px; font-weight: bold; font-family: Roboto, Arial, sans-serif;">9</div>
    </div>
  </div>
</div>

---

9

@j08691如何在devTools中看到这一点？它将元素显示为一个

img

标记，而不是div。而

img

标记显示的

font-weight

为400，其中as

bold

应为700。我必须删除一堆div，这些div位于您希望通过inspector访问的div之上。

document.querySelector('div[style*="z-index: 103"] div[style*="display: table-cell"] > div')