blocks|key|4584995|text|您可以在Google脚本调用insertBefore方法之前替换它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4584996|http://jsfiddle.net/coma/7st6d9p2/|offset|length|4584997|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);
};

//+Check+it!
new+google.maps.Map(document.getElementById('map'),+{
++++center+++++++++++:+new+google.maps.LatLng(51.508742,-0.120850),
++++zoom+++++++++++++:+16,
++++mapTypeId++++++++:+google.maps.MapTypeId.ROADMAP,
++++streetViewControl:+false,
++++zoomControl++++++:+false,
++++panControl+++++++:+false,
++++mapTypeControl+++:+false
});|code-block|syntax|javascript|4584998|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

You can replace the insertBefore method before the Google script invokes it:

<a href="http://jsfiddle.net/coma/7st6d9p2/" rel="noreferrer">http://jsfiddle.net/coma/7st6d9p2/</a>

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

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

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

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

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

 insertBefore.call(head, newElement, referenceElement);
};

// Check it!
new google.maps.Map(document.getElementById('map'), {
 center : new google.maps.LatLng(51.508742,-0.120850),
 zoom : 16,
 mapTypeId : google.maps.MapTypeId.ROADMAP,
 streetViewControl: false,
 zoomControl : false,
 panControl : false,
 mapTypeControl : false
});
</code></pre>

blocks|key|78307|text|我找到了上面的解决方案，以防止网站与谷歌地图加载Roboto。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|78308|如果你--像我一样--使用Wordpress，可能会有其他插件引用Google字体。|78309|然而，我在我的一些网站上遇到了上面的代码，因为它的一部分(1)也影响了其他样式的加载，(2)“杀死”样式，故意不仅包含通用样式，但其他样式以及(3)不影响其他谷歌字体加载，其中一个或另一个插件添加链接到fonts.googleapis.com的DOM操作以及。|78310|下面的方法对我很有效。它只是防止其他脚本在其href-attribute中添加任何具有https://fonts.googleapis.com的标记。|offset|length|78311|(function($)+{
var+isGoogleFont+=+function+(element)+{
++++//+google+font+download
++++if+(element.href
++++++++&&+element.href.indexOf('https://fonts.googleapis.com')+===+0)+{
++++++++return+true;
++++}+++++++
++++return+false;
}

//+we+override+these+methods+only+for+one+particular+head+element
//+default+methods+for+other+elements+are+not+affected
var+head+=+$('head')[0];

var+insertBefore+=+head.insertBefore;
head.insertBefore+=+function+(newElement,+referenceElement)+{
++++if+(!isGoogleFont(newElement))+{
++++++++insertBefore.call(head,+newElement,+referenceElement);
++++}
};

var+appendChild+=+head.appendChild;
head.appendChild+=+function+(textNode)+{
++++if+(!isGoogleFont($(textNode)[0]))+{
++++++++appendChild.call(head,+textNode);
++++}
};
})(jQuery);|code-block|syntax|javascript|78312|entityMap|0|LINK|mutability|MUTABLE|url|https://fonts.googleapis.com/^0|0|0|0|17|S|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@$H|10|I|11|1|12]]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I found above solution to prevent websites with Google Maps from loading Roboto.

If you - like I do - use Wordpress, there might be other plugins referring to Google Fonts. 

However, I struggled on some of my websites with the above code, since parts of it (1) affected also other styles to load, (2) "killed" styles, which intentionally not only contained gm-style, but other styles as well and (3) not affected other Google Fonts to load, where one or another plugin added links to fonts.googleapis.com by DOM-manipulation as well.

The below worked for me. It simply prevents other scripts from adding any tag having <a href="https://fonts.googleapis.com" rel="nofollow noreferrer">https://fonts.googleapis.com</a> in it's href-attribute.

<pre><code>(function($) {
var isGoogleFont = function (element) {
 // google font download
 if (element.href
 &amp;&amp; element.href.indexOf('https://fonts.googleapis.com') === 0) {
 return true;
 } 
 return false;
}

// we override these methods only for one particular head element
// default methods for other elements are not affected
var head = $('head')[0];

var insertBefore = head.insertBefore;
head.insertBefore = function (newElement, referenceElement) {
 if (!isGoogleFont(newElement)) {
 insertBefore.call(head, newElement, referenceElement);
 }
};

var appendChild = head.appendChild;
head.appendChild = function (textNode) {
 if (!isGoogleFont($(textNode)[0])) {
 appendChild.call(head, textNode);
 }
};
})(jQuery);
</code></pre>

Google adds styles to the maps container that override my styles. 
I know how to fix this. But the API (v3.8/9/exp) also loads the webfont "Roboto" which I don't really need/want.

Is there any setting/option/way around this? 
Can I prevent the API from adding the extra CSS?

This is the code the google-maps-API adds to the <code>&lt;head&gt;</code> of my page:

<pre><code>&lt;style type="text/css"&gt;
 .gm-style .gm-style-cc span,
 .gm-style .gm-style-cc a,
 .gm-style .gm-style-mtc div {
 font-size:10px
 }
&lt;/style&gt;

&lt;link type="text/css" 
 rel="stylesheet" 
 href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"&gt;

&lt;style type="text/css"&gt;
 @media print {
 .gm-style .gmnoprint,
 .gmnoprint {
 display:none
 }
 }
 @media screen {
 .gm-style .gmnoscreen,
 .gmnoscreen {
 display:none
 }
 }
&lt;/style&gt;
&lt;style type="text/css"&gt;
 .gm-style {
 font-family: Roboto,Arial,sans-serif;
 font-size: 11px;
 font-weight: 400;
 text-decoration: none
 }
&lt;/style&gt;
</code></pre>

Google Maps v3 - prevent API from loading Roboto font

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

Google将样式添加到地图容器中，以覆盖我的样式。我知道怎么解决这个问题。但是API (v3.8/9/exp)也加载了我并不真正需要/想要的webfont "Roboto“。是否有任何设置/选项/方法来解决这个问题？我可以阻止API添加额外的CSS吗？这是google-maps API添加到我的页面的<head>中的...

问谷歌地图v3 -阻止应用编程接口加载Roboto字体
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌地图v3 -阻止应用编程接口加载Roboto字体EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问谷歌地图v3 -阻止应用编程接口加载Roboto字体
EN