我删除了页面中所有不相关的部分以缩小问题范围。
当页面最初加载时，标题的大小是正确的，但本地图加载时，它会改变标题的大小。如果我注释掉 map div，标题将保持正确的大小。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div id="navbar">
<h2>Title</h2>
</div>
<div class="mainContent">
<div id="map"></div>
</div>
</body>
<script src="map.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap"></script>
</html>
map .js
var map = null;
function initMap() {
var location = {lat: 37.421842, lng: -122.084119};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: location
});
}
样式表.css
#map {
height: 350px;
width: 100%;
}
body {
font-family: 'Roboto', sans-serif;
}
#navbar {
background-color: gray;
}
.mainContent {
margin: 20px;
}
我尝试手动设置所有内容的大小，但它似乎覆盖了所有内容，包括 !important。唯一修复的是它不使用 Roboto 字体。
最佳答案
谷歌地图使用 Roboto 作为它的字体，并且因为它不是 iframe，所以如果网站不使用它，则需要导入 Roboto 字体样式表。这样做的问题是即使网站已经有 Roboto，它也会导入样式表。不仅如此，样式表被注入(inject)到头部的顶部，这意味着它将覆盖网站已经使用的任何 Roboto 字体。就我而言，我使用的是谷歌地图不使用的字体粗细 900。这意味着一旦 map 初始化，我所有的 900 加权字体都会调整到 700。
我找到了这个解决方案 https://stackoverflow.com/a/35993046/2153273
已接受的答案不再有效，但在更远的地方有一个可行的解决方案。直接链接应该带你到它。
关于javascript - 为什么在我的页面上加载 Google map 会调整页面上使用 Roboto 字体的所有内容的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50301974/