Google Maps API 更改了我的字体系列

Question

我在使用谷歌地图 APIv3 的页面上的字体系列有问题

在带有 Google 地图的页面上，当我在任何其他页面上没有此问题时，我的字体会更改为其他字体，而不是我配置的字体系列。

这是导入Google Maps API的代码，不知道这里有没有问题。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

我使用的字体来自 fonts.googleapis.com，如果我将字体系列更改为安装在我电脑上的东西，比如说“Consolas”，字体没有问题

<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>

如果我忽略这一行，字体会从 fonts.googleapis.com 变回配置的字体系列。

以前有人遇到过同样的问题吗？想不出解决办法。

如果您想亲眼看看我的问题，请访问以下网站“主页”和“联系方式”页面（网站仍在建设中）

主页

联系页面

雅各布

Answer 1

导入谷歌地图API的代码没问题，没毛病。发生的事情是该样式被 html 样式（sans-serif）覆盖。

您只需要编辑您的 css/bootstrap.min.css 样式表并将 !important 添加到您将字体系列发送到 Roboto 的行：

body{font-family:"Roboto",sans-serif !important;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}

或者将 Roboto 字体添加到您的 html 样式中：

html{font-family:"Roboto",sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

我还注意到您两次链接到 Roboto 字体：

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="http://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css">

这将使页面显示最大权重（700）的字体，这与主页上的权重（300）不同。如果您想保持一致，您可能需要删除第一个链接。