Question

当我使用谷歌地图API时会发生奇怪的事情。当我在页面中包含地图时，标题的font-weight visualy会单独更改。当我在看控制台时，没有任何改变，使用相同的字体 - 重量，但视觉效果显然不一样。

这里是我正在使用地图的代码：

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wtf
    </title>
    <meta name="description" content="" />

    <!--My CSS-->
        <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/js/font-awesome/css/font-awesome.min.css')?>"/>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/main.css')?>"/>

</head>
<body>
<div id="content">
    <section id="sectionContact" class="content">
        <div class="title"><h1>Contact</h1></div>
        <div class="coordonnees">
            <h3>Address :</h3>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.1</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            </ul>
        </div>
        <div id="map">
            <p>Chargement de la carte</p>
        </div>
        <div class="situation">
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.:</h3>
            <p>
                Le cabinet est situé en plein centre de la Ville de MULHOUSE, dans le prolongement du bâtiment où est établi la CPAM de MULHOUSE, en face du Tribunal de Grande Instance de MULHOUSE.
            </p>

            <h3>houston:</h3>
            <p>
                or sit amet, consectetur adipiscing elit. Nulla erat ipsum, dictum nec sodales sit amet, hendrerit sit amet urna. Nullam lobortis at elit ut auctor. Aenean lobortis pretium velit at scelerisque. Sed in libero vel ante vulputate congue eget non augue. Donec consectetur risus i
            </p>
        </div>
    </section>


    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=SECRET"></script>
    <script type="text/javascript">
        var map;
        var initialize;
        initialize = function(){
            var latLng = new google.maps.LatLng(51.7514108, 9.341490199999953); // Correspond au coordonnées du cabinet
            var myOptions = {
                zoom      : 14,
                center    : latLng,
                mapTypeId : google.maps.MapTypeId.TERRAIN, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
                maxZoom   : 20
            };
            map = new google.maps.Map(document.getElementById('map'), myOptions);
            var marker = new google.maps.Marker({
                position : latLng,
                map      : map,
                title    : "Cabinet"
                //icon     : "marker_lille.gif" // Chemin de l'image du marqueur pour surcharger celui par défaut
            });
        };
        initialize();
    </script>
</div><!--Fin div id wrapper (menu.php)-->
</div><!--Fin div id content (header.php)-->
<script type="text/javascript" src="<?php echo base_url('assets/js/jQuery/dist/jquery.min.js') ;?>"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/main.js') ;?>"></script>
</body>
</html>

感谢您的帮助！

Answer 1

问题的根源在于您的CSS设置了font-weight:100;，但您的Google字体调用并未包含100权重：http://fonts.googleapis.com/css?family=Roboto:300,400,500,700。当您在没有Google地图的情况下加载页面时，字体会显示比您指定的更粗，因为如果您没有调用它，它就无法显示精简版本。

Google地图更改重量的原因是它包含完整的Roboto字体（即包括100重量）。因此，当地图位于页面上时，字体可以按指定的权重正确显示。这就是为什么它看起来很薄（如你指定的那样）和厚厚的没有。

将100添加到要下载的权重列表中，并修复问题：

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

Answer 2

这是字体问题。对于With-Map页面字体包含在<head>中但是在没有地图页面的情况下，它不包括在内。

使用谷歌地图API的Html标题字体权重更改

2 个答案: