加载Google Map为何导致页面中使用Roboto字体的元素尺寸改变？

先梳理下你的核心问题：页面初始加载时标题显示完全正常，但一旦Google Map组件加载完成，标题的尺寸就会莫名变化；只要注释掉<div id="map"></div>，标题就能恢复正常。你试过手动设置元素尺寸甚至用!important强制覆盖都没用，唯一有效的办法就是放弃使用Roboto字体。

问题根源 #

这其实是Google Maps JavaScript API的默认行为引发的字体冲突：Google Maps会自动加载它自己的Roboto字体资源，而这套字体的样式规则会和你页面中自行引入的Roboto字体产生优先级冲突，最终覆盖了你原本给标题设置的字体尺寸。

可行的解决方案 #

1. 明确指定Google Fonts的字重 #

修改页面头部的Google Fonts引入链接，明确指定Roboto字体的字重（比如常规的400），让页面字体的定义更精准，避免和Maps加载的字体混淆：

<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet">

2. 强制锁定标题的字体样式 #

在CSS中给标题元素添加更具体的样式规则，确保它的优先级高于Maps注入的样式：

#navbar h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px; /* 替换成你需要的正常尺寸 */
  font-weight: 400;
}

如果还是被覆盖，可以给属性加上!important来强制生效，不过只要选择器足够具体（比如#navbar h2），通常不需要额外加!important。

3. 禁止Google Maps加载默认字体 #

如果你不需要地图的原生UI控件，可以在初始化地图时配置参数，阻止Maps加载自带的字体：

function initMap() {
  var location = {lat: 37.421842, lng: -122.084119};
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: location,
    disableDefaultUI: true, // 禁用默认UI控件
    styles: [{
      featureType: 'all',
      elementType: 'labels',
      stylers: [{visibility: 'off'}]
    }]
  });
}

注意：禁用默认UI后，地图的缩放按钮等原生控件会消失，如果你需要这些控件，建议优先使用前两种方法。

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