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

【问题标题】：Google Maps API changes my font-familyGoogle Maps API 更改了我的字体系列
【发布时间】：2014-08-10 23:15:19
【问题描述】：

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

在使用 Google 地图的页面上，当我在任何其他页面上没有此问题时，我的字体会更改为我配置的字体系列之外的其他内容。

这是导入谷歌地图API的代码，不知道这里有没有问题。

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

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

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

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

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

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

Homepage

Contactpage

雅各布

【问题讨论】：

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

【解决方案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）不同。如果您想保持一致，您可能需要删除第一个链接。

【讨论】：

看起来带有 robots:300,400,500,700 的 css 样式表是由 Google Maps API 链接的。如果我删除此 css 文件的内容，则字体的布局正确。有没有办法阻止这个 css 文件？
哦，原来如此！该字体不会被您的 html 字体系列替换，而是被由 Google Maps JavaScript API 导入的具有更高权重的字体替换。然后你只需要添加“font-weight:300;”适合您的身体风格，页面看起来会正确。
在 Ionic 上，这个问题会使 Google 地图加载时的视图闪烁！谢谢！
@FernandoFabreti 对于 Ionic，问题是另一回事。此处的 OP 似乎明确地将 Roboto 用于他的站点（站点现已关闭）。我们的问题可能是由 Google 下载的 Roboto 字体替换了最初呈现为 Arial 的浏览器的无衬线字体引起的。如果我在 Roboto 完成加载之前暂停执行，这就是“渲染字体”下列出的内容。
在@ionic/angular 的core.css 中，html.md 得到--ion-default-font 的"Roboto", "Helvetica Neue", sans-serif。然后，html 得到--ion-font-family 的var(--ion-default-font)。最后，在typography.scss 中，html 得到font-family 的var(--ion-font-family)。但似乎我需要自己手动包含一些 CDN 中的最佳 MD（和 iOS）字体，以防止 Google 下载的 Roboto 字体在稍后渲染时生效，从而在文本更改外观时导致可见的“闪烁”。