加载谷歌地图打破CSS /样式表

Question

我有一个使用Google地图的简单应用程序。特别是我正在使用AgmCoreModule和places库：

AgmCoreModule.forRoot({
  apiKey: '*********************',
  libraries: ['places']
}),

一切正常，除了导航到模块加载页面，我注意到我的样式表被弄乱了。像

<b>My text</b>

看起来不再一样了。

只需导航到页面即可更改

对此：

看起来字体也改变了。

有什么主意我可以避免这种行为吗？

---

更新：

我注意到，当我转到加载Google地图的页面时，有一个针对https://fonts.googleapis.com/css?family=Roboto:300,400,500,700的GET请求。我认为这是问题的根源。

有没有一种方法可以防止Google地图这样做？

Answer 1

这似乎是一个已知问题（https://github.com/SebastianM/angular-google-maps/issues/1466）。

有一种解决方法只能阻止Google地图下载其他字体：

<script>
    var head = document.getElementsByTagName('head')[0];

    // Save the original method
    var insertBefore = head.insertBefore;

    // Replace it!
    head.insertBefore = function (newElement, referenceElement) {

        if (newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {

            console.info('Prevented Roboto from loading!');
            return;
        }

        insertBefore.call(head, newElement, referenceElement);
    };
</script>