如何用DevTools查看SVG及谷歌地图SVG标记的字体与fontWeight问题

这其实很简单，不管是Chrome还是Firefox，操作步骤都大同小异：

• 先打开DevTools：可以按F12快捷键，或者右键点击页面上的SVG元素，选择「检查」；
• 在元素面板里，找到你要查看的SVG文本元素（比如<text>标签），如果不好定位，直接用DevTools左上角的选择工具点击SVG里的文字，就能快速找到对应元素；
• 切换到样式面板，往下翻找font-family属性，这里显示的就是当前文本使用的字体名称；
• 要是你想确认这个字体是否真的加载到页面了，Chrome可以切换到应用程序面板，找到左侧的「字体」选项查看所有加载的字体；Firefox则是在存储面板里找「字体」，对比样式里的名称即可验证。

我之前也碰到过类似的坑，谷歌地图的默认label标记有不少隐藏限制——大概率是API内部没有直接用CSS控制字体粗细，甚至可能把文字转成了SVG路径（相当于纯图形），所以你设置fontWeight根本起不了作用。给你几个可行的解决思路：

方法一：自定义SVG标记（最靠谱） #

自己动手做一个完全可控的SVG标记，把文字样式写死在SVG里，比如：

<svg width="40" height="40" viewBox="0 0 40 40">
  <!-- 蓝色圆形背景 -->
  <circle cx="20" cy="20" r="18" fill="#4285F4" />
  <!-- 数字文本，手动设置粗体 -->
  <text x="20" y="25" text-anchor="middle" fill="white" font-weight="900" font-family="Arial, sans-serif" font-size="18">9</text>
</svg>

然后把这个SVG作为自定义图标传给谷歌地图的Marker组件，替换原来的label配置。你可以把SVG转成data URI，或者存成单独的SVG文件引用，这样就能完全掌控字体粗细了。

方法二：用HTML自定义标记 #

如果写SVG嫌麻烦，也可以用HTML元素做标记，这样CSS样式随便调：
先写HTML结构：

<div class="map-marker">9</div>

对应的CSS：

.map-marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #4285F4;
  color: white;
  font-weight: 900; /* 用数字值比bold更精准 */
  font-size: 16px;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white; /* 可选，还原默认标记的边框效果 */
}

然后通过谷歌地图API的Marker的icon属性，把这个HTML元素转成data URI或者直接用API支持的自定义内容方式（不同版本API细节有差异，查下官方文档即可）。

方法三：检查API配置细节 #

有时候可能是你漏了配置fontFamily，谷歌地图的label可能需要明确指定字体，比如：

label: {
  text: "9",
  color: "white",
  fontWeight: "bold",
  fontFamily: "Arial, sans-serif",
  fontSize: "14px"
}

不过这个方法不一定管用，毕竟API内部限制较多，要是试了还是不行，果断用前面两种自定义标记的方法。

内容的提问来源于stack exchange，提问作者AngryHacker