代码之家 › 专栏 › 技术社区 › lbenedetto

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

google-maps css html javascript

lbenedetto · 技术社区 · 6 年前

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

当页面最初加载时,标题的大小是正确的,但当地图加载时,它会更改标题的大小。如果我注释掉map div,标题将保持正确的大小。

指数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>

地图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;
}

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

1 回复 | 直到 6 年前

lbenedetto 6 年前

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

我找到了这个解决方案 https://stackoverflow.com/a/35993046/2153273

公认的答案不再有效,但在更远的地方有一个可行的解决方案。直接链接应该会将您带到它。

推荐文章