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

Question

谁能给我一个提示，说明为什么我的网站的字体在选择其中一个导航栏项目时会发生变化？

这是网站：http://sideta.tk/（第四个导航栏项目“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>

这里是控制器：

sidetaApp.controller('valgyklosCtrl', function($scope) {
  $scope.map = { center: { latitude: 54.902522, longitude: 23.996512 }, zoom: 14 };
  $scope.marker = { coords: { latitude: 54.902522, longitude: 23.996512 }, id: 0 };
  $scope.map2 = { center: { latitude: 54.908702, longitude: 23.992693 }, zoom: 14 };
  $scope.marker2 = { coords: { latitude: 54.903763, longitude: 23.997539 }, id: 1 }

});

Answer 1

我认为是在初始加载时加载 Roboto 时只有 300 字体粗细。在开发工具中查看您的网络/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 粗细。

更新： 请参阅Google Maps v3 - prevent API from loading Roboto font 以停止以 Roboto 字体加载 google map api