css 谷歌Mapv3 -防止API加载Roboto字体

cfh9epnr  于 2022-12-20  发布在  其他
关注(0)|答案(4)|浏览(195)

Google会将样式添加到覆盖我的样式的Map容器中。
我知道如何解决这个问题,但是API(v3.8/9/exp)也加载了webfont“Roboto”,我并不真正需要/想要它。
是否有任何设置/选项/方法可供选择?
我可以阻止API添加额外的CSS吗?
这是google-maps-API添加到我的页面的<head>中的代码:

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

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

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

ux6nzvsh1#

您可以在Google脚本调用insertBefore方法之前替换它:
http://jsfiddle.net/coma/7st6d9p2/

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
});
jk9hmnmh

jk9hmnmh2#

2017年10月更新

Google改变了在页面上注入样式的方法。目前他们插入了一个空的style元素,然后用Robot字体更改了这个样式元素的内容。这里是一个新的解决方案:

// Preventing the Google Maps libary from downloading an extra font
(function() {
    var isRobotoStyle = function (element) {

        // roboto font download
        if (element.href
            && element.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) {
            return true;
        }
        // roboto style elements
        if (element.tagName.toLowerCase() === 'style'
            && element.styleSheet
            && element.styleSheet.cssText
            && element.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) {
            element.styleSheet.cssText = '';
            return true;
        }
        // roboto style elements for other browsers
        if (element.tagName.toLowerCase() === 'style'
            && element.innerHTML
            && element.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) {
            element.innerHTML = '';
            return true;
        }
        // when google tries to add empty style
        if (element.tagName.toLowerCase() === 'style'
            && !element.styleSheet && !element.innerHTML) {
            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 (!isRobotoStyle(newElement)) {
            insertBefore.call(head, newElement, referenceElement);
        }
    };

    var appendChild = head.appendChild;
    head.appendChild = function (textNode) {
        if (!isRobotoStyle($(textNode)[0])) {
            appendChild.call(head, textNode);
        }
    };
})();

原始答案

感谢coma提供的解决方案!我还决定拦截那些覆盖字体家族、字体大小和字体粗细的样式。适用于敕勒浏览器和IE8+的完整解决方案:

// Preventing the Google Maps libary from downloading an extra font
var head = $('head')[0];
var insertBefore = head.insertBefore;
head.insertBefore = function (newElement, referenceElement) {
    // intercept font download
    if (newElement.href
        && newElement.href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0) {
        return;
    }
    // intercept style elements for IEs
    if (newElement.tagName.toLowerCase() === 'style'
        && newElement.styleSheet
        && newElement.styleSheet.cssText
        && newElement.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) {
        return;
    }
    // intercept style elements for other browsers
    if (newElement.tagName.toLowerCase() === 'style'
        && newElement.innerHTML
        && newElement.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) {
        return;
    }
    insertBefore.call(head, newElement, referenceElement);
};
wz8daaqr

wz8daaqr3#

我发现上面的解决方案,以防止网站与谷歌Map加载Roboto。
如果你--像我一样--使用WordPress,可能会有其他插件引用谷歌字体。
然而,我挣扎在我的一些网站与上述代码,因为它的一部分(1)也影响其他样式加载,(2)“杀死”样式,故意不仅包含gm样式,但其他样式以及(3)不影响其他谷歌字体加载,其中一个或另一个插件添加链接到fonts.googleapis.com的DOM操作以及。
下面的方法对我很有效,它只是防止其他脚本添加任何在href属性中包含https://fonts.googleapis.com的标记。

(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);
eit6fx6z

eit6fx6z4#

不幸的是,我是一个新手,我不能让其他的建议工作。所以我从DOM中删除了所有的谷歌字体。我希望这能有所帮助。

const googleFont = document.querySelector('link[rel="stylesheet"][href*="fonts.googleapis.com"]');
    if (googleFont) {
      googleFont.remove();
    }

相关问题