在angularjs网站上加载谷歌地图会改变整个网站的字体

有谁能给我一个可能的原因提示，为什么我的网站字体的变化时，其中一个导航栏项目被选中

这是网站：（第四个导航栏项目“Valgyklos”改变了字体）

以下是部分html代码：

   <div ng-controller="valgyklosCtrl" class="container">
    <div class="row" style="height: 40px"></div>
    <div class="row">
        <div class="col-md-5">
            <ui-gmap-google-map center='map.center' zoom='map.zoom'>
                <ui-gmap-marker coords="marker.coords" idkey="marker.id"></ui-gmap-marker>
            </ui-gmap-google-map>
            <!--<google-map center='map.center' zoom='map.zoom'></google-map>-->
            <h3 class="text-center">NT Valdos</h3>
            <p>Valgykla esanti NT Valdos teritorijoje.</p>
        </div>

        <div class="col-md-2"></div>
        <div class="col-md-5">
            <ui-gmap-google-map center='map2.center' zoom='map2.zoom'>
                <ui-gmap-marker coords="marker2.coords" idkey="marker2.id"></ui-gmap-marker>
            </ui-gmap-google-map>
            <h2 class="text-center">Energetikos Remontas</h2>
            <p>Valgykla Esanti Energetikos Remonto teritorijoje.</p>
        </div>
    </div>

</div>

---

}))

我认为是在初始加载时，您加载的Roboto字体只有300。在dev工具中查看您的网络/css

css?family=Roboto:300
fonts.googleapis.com

当您打开地图进入页面时，API将加载Roboto字体的所有字体重量

css?family=Roboto:300,400,500,700
fonts.googleapis.com

如果你看你的css，你使用的是不同的字体权重，而不是300

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  **font-weight: 500;**
  line-height: 1.1;
  color: inherit;
}

因此，当加载完整的Roboto字体集时，将对样式应用正确的字体权重

看起来您需要在开始时使用全部字体权重，或者更改css以使用300权重

更新：

---

请参阅以Roboto字体停止google map api加载

Perfect，谢谢您的帮助。为什么会在特定的导航栏部分加载额外的字体权重？我只在主HTML文件中指定了字体，并且只指定了300的重量。我也在开发工具中看到，额外的权重在Initiator下有“Other”。我认为一定是GoogleMapAPI使用了roboto字体，因此加载了它。也许api中有一个设置，您可以告诉它不要加载它。我在答案中添加了一个链接，以停止MapAPI加载Roboto

css?family=Roboto:300,400,500,700
fonts.googleapis.com