GoogleマップのAPIを使用してHTMLのタイトルフォントの太さの変更

GoogleマップAPIを使用すると、何か変わったことが起こります。ページにマップを含めると、タイトルのフォントウェイトが1つだけ変更されます。私がコンソールを見ているとき、同じフォントウェイトが使用されますが、視覚的な結果は明らかに同じではありません。GoogleマップのAPIを使用してHTMLのタイトルフォントの太さの変更

ここで私はマップを使用しているコード：

<!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>

はあなたの助けをありがとう！

出典

2016-09-30 Aurélien

問題の根本は、CSSがfont-weight:100;に設定されていますが、Googleフォントの呼び出しには100という重量：http://fonts.googleapis.com/css?family=Roboto:300,400,500,700が含まれていないということです。 Googleマップなしでページを読み込むと、フォントを呼び出さなかった場合、薄いバージョンが表示されないため、指定したよりも太いフォントが表示されます。

グーグルマップがウェイトを変更するのは、完全なロボートフォント（つまり、100ウェイトを含む）が含まれているからです。したがって、マップがページ上にある場合、フォントは指定された重みで正しく表示されます。だからこそ、あなたが指定したようにマップで薄く見えず、太く見えません。

は、あなたがダウンロードしたいの重みのリストに100を追加し、問題を修正する必要があります。

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

出典

2016-09-30 17:55:49 ASGM

完璧！ご協力ありがとうございました。 –

問題はありません@Aurélien！あなたが答えを見つけたら（私だけでなく）、あなたはそれを上書することができます。もしあなたの問題が解決したら、あなたはそれを解決としてマークすることができます。 – ASGM

私はそれをしましたが、私がそれをクリックすると私の低い評判はポストスコアに影響しません。 –

それはフォントの問題です。 With Mapページフォントのは<head> に含まれていますが、マップなしページには含まれていません。

出典

2016-09-30 18:06:35

GoogleマップのAPIを使用してHTMLのタイトルフォントの太さの変更

答えて

関連する問題