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

【问题标题】：How can I use DevTools to see what font is being used in an SVG?如何使用 DevTools 查看 SVG 中使用的字体？
【发布时间】：2018-09-09 21:44:06
【问题描述】：

我正在尝试找出放置在 Google 地图表面上的 SVG 标记中使用的字体。具体来说，9 在this codepen 中的蓝色标记上。

标签设置有以下属性：

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

但是，当我使用 Chrome 或 Firefox 将标记归零时，无论 fontWeight 属性设置为什么，我都会得到相同的字体粗细。

有办法吗？

【问题讨论】：

<div style="color: white;font-size: 14px;font-weight: bold;font-family: Roboto, Arial, sans-serif;">9</div>
@j08691 我如何在 devTools 中看到这个？它将元素显示为img 标签，而不是 div。而img 标签显示font-weight 为400，而bold 应为700。
我不得不删除一堆 div，这些 div 位于您想通过检查器访问的顶部。

标签： html css svg google-chrome-devtools firefox-developer-tools

【解决方案1】：

Google 地图的做法完全是偷偷摸摸的。为防止鼠标选中数字，将SVG图标（即蓝色圆圈没有数字）画在下层，数字位于上方，然后图标再次呈现在顶部，但使用opacity="0.01"。如果您尝试使用开发人员工具选择标记，您最终会进入更高层，根本看不到数字的 DOM 节点。

您选择的图标位于带有z-index:3 的图层中。前面的两个兄弟元素是一个带有z-index:1 的div（两者都没有class 也没有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>

以下选择器将找到数字（在 Codepen 控制台中，CORS 会阻止您从浏览器控制台以编程方式访问它）：

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

【讨论】：