Google Maps API会更改我的font-family

时间:2014-06-20 08:37:17

标签: javascript css google-maps-api-3 fonts

我在使用google maps APIv3的页面上遇到font-family问题

在使用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,如果我将font-family更改为我的电脑上安装的东西,让我们说“Consolas&#39;”,没有问题用字体

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

如果我退出此行,字体将从fonts.googleapis.com更改回已配置的font-family。

之前有人遇到过同样的问题吗? 无法找到解决方案。

如果你想亲眼看到我的问题, 它的以下网站&#39; Home&#39;和&#39;联系&#39;页面(网站正在建设中)

Homepage

Contactpage

雅各

1 个答案:

答案 0 :(得分:3)

导入Google Maps 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)上的权重不同。如果您想保持一致,可能需要删除第一个链接。