Javascript 为什么在我的页面上加载谷歌地图会调整页面上使用Roboto字体的所有内容？_Javascript_Html_Css_Google Maps

Javascript 为什么在我的页面上加载谷歌地图会调整页面上使用Roboto字体的所有内容？

javascript html css google-maps

Javascript 为什么在我的页面上加载谷歌地图会调整页面上使用Roboto字体的所有内容？,javascript,html,css,google-maps,Javascript,Html,Css,Google Maps,我把页面上所有不相关的部分都删掉，以缩小问题的范围当页面最初加载时，标题的大小是正确的，但当地图加载时，它会更改标题的大小。如果我注释掉map div，则标题的大小仍然正确 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=R

我把页面上所有不相关的部分都删掉，以缩小问题的范围

当页面最初加载时，标题的大小是正确的，但当地图加载时，它会更改标题的大小。如果我注释掉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>

stylesheet.css

#map {
    height: 350px;
    width: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
}

#navbar {
    background-color: gray;
}

.mainContent {
    margin: 20px;
}

我尝试手动设置所有内容的大小，但它似乎覆盖了所有内容，包括！重要的。唯一可以修复的是它没有使用Roboto字体。

谷歌地图使用Roboto作为它的字体，因为它不是iframe，如果网站没有使用它，则需要导入Roboto字体样式表。问题是，即使站点已经有Roboto，它也会导入样式表。不仅如此，样式表被注入到头部的顶部，这意味着它将覆盖网站已经使用的Roboto字体。在我的例子中，我使用的是字体权重900，谷歌地图没有使用。这意味着，一旦地图初始化，我所有的900种加权字体都将调整到700种

我找到了这个解决方案

公认的答案不再有效，但在更深处有一个可行的解决方案。直接链接应该会把你带到它

#map {
    height: 350px;
    width: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
}

#navbar {
    background-color: gray;
}

.mainContent {
    margin: 20px;
}