Partage
  • Partager sur Facebook
  • Partager sur Twitter

[css] changement et insertion de font

    14 décembre 2017 à 9:21:39

    Bonjour,

    J'ai suivi hier le cours où on explique le changement de fonts et j'ai essayé sans succès dans le navigateur. Même chose pour l'insertion d'une police personnelle. Or, j'ai regardé sur mon ordinateur et j'ai toutes les polices proposées donc il n'est pas normal que le Firefox ne les trouve pas. Dans le doute, j'ai tenté le code sur Code Pen et sur sublime texte, j'ai toujours le même résultat, que ce soit pour le changement de police ou l'insertion de police. J'ai aussi changé de navigateur, ça n'a rien changé non plus.

    Voici les sreenshot que j'ai pris:

    • Partager sur Facebook
    • Partager sur Twitter

    Jess

      14 décembre 2017 à 9:30:07

      Bonjour,

      Pour commencer, le code sur ce forum doit s'insérer à l'aide du bouton </>. Si l'on veut tester ton code on ne vas pas tout recopier... ;)

      Et le reste de ton CSS ne fonctionne pas non plus ou ce sont juste les polices qui posent problème ?

      Ensuite, où sont tes polices ? Dans un dossier ? Dans un sous-dossier ?

      Et enfin pourquoi charset="utf8" dans l'appel à ton fichier CSS ? Je t'invite à relire le cours sur cette partie....

      Et au passage, tu pourras également revoir la structure de ton code (pas de ul dans un p par exemple) ;)

      -
      Edité par Mewen_bzh 14 décembre 2017 à 9:31:05

      • Partager sur Facebook
      • Partager sur Twitter
      Je ne réponds pas aux messages privés.
        14 décembre 2017 à 11:18:12

        Merci pour le </> . Je n'en savais rien.

        Ensuite je pense que c'est tout le css qui pose problème.

        Ma police importée est deux dossiers en dessous par rapport au css. Je sais il faut mettre la police dans le même dossier que le css mais même comme ça ça ne fonctionne pas

        Et heu... si tu regardes bien le screen le charset=utf8 est dans le html non dans le css

        Merci aussi pour le <ul> ce n'est pas assez explicite dans le cours.

        <!DOCTYPE html>
        <html>
        <head>
        	<meta charset="utf 8"/>
        	<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
        	
        	<title>Formatage du texte</title>
        	
        		<h1>Mon super site</h1>
        </head>
        
        <body>
        
        			<p>Soyez les bienvenu(e)s sur ce qui sera plus tard un site
        			</p>
        			Voici une liste de polices qui fonctionnent bien sur la plupart des navigateurs :
        				<ul>
        					<li>Arial ;</li>
        
        					<li> Arial Black ;</li>
        
        					<li>Comic Sans MS ;</li>
        
        					<li> Courier New ;</li>
        
        					<li> Georgia </li>
        
        					<li>Impact ;</li>
        
        					<li>Times New Roman ;</li>
        
        					<li>Trebuchet MS ;</li>
        
        					<li>Verdana.</li>
        				</ul>
        			
        			
        
        </body>
        </html>
         

        	@font-face { 
        	
        	/* Définition d'une nouvelle police nommée CAC Champagne */
            font-family: 'cac_champagneregular';
            src: url('cac_champagne-webfont.eot');
            src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
                 url('cac_champagne-webfont.woff') format('woff'),
                 url('cac_champagne-webfont.ttf') format('truetype'),
                 url('cac_champagne-webfont.svg#cac_champagneregular') format('svg');
        }
        
        h1 /* Utilisation de la police qu'on vient de définir sur les titres */
        {
            font-family: 'cac_champagneregular', Arial, serif;
        }
        
        
        h1
        {
            font-size: large;
        }
        
        p
        {
            font-size: small;
        }
        
        p
        {
            font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
        } 




         



        • Partager sur Facebook
        • Partager sur Twitter

        Jess

          14 décembre 2017 à 11:45:27

          C'est de ce charset que je parlais, à la ligne 5 de ton fichier HTML et non pas de celui dans la balise meta à la ligne 4 : 

          <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />


          Je pense que c'est cela que le navigateur n'aime pas, il doit s'attendre à : 

          <link rel="stylesheet" href="style.css" />



          -
          Edité par Mewen_bzh 14 décembre 2017 à 11:49:10

          • Partager sur Facebook
          • Partager sur Twitter
          Je ne réponds pas aux messages privés.
            14 décembre 2017 à 12:08:39

            J'ai essayé, ça ne marche pas
            • Partager sur Facebook
            • Partager sur Twitter

            Jess

              14 décembre 2017 à 12:10:26

              Tu pourrais nous fournir des captures d'écran de tes dossiers et sous-dossiers s'il te plait ?
              • Partager sur Facebook
              • Partager sur Twitter
              Je ne réponds pas aux messages privés.
                14 décembre 2017 à 12:27:54

                oui, bien sûr

                Voilà en ce qui concerne la police téléchargée
                • Partager sur Facebook
                • Partager sur Twitter

                Jess

                  14 décembre 2017 à 13:46:05

                  Bon déjà le lien vers ton fichier CSS n'est pas bon.

                  <link rel="stylesheet" href="stylesheet.css" type="text/css" />


                  Ici ton fichier HTML dit au navigateur : "va chercher le fichier stylesheet.css qui est dans le même dossier que moi".

                  Or ici ton fichier CSS est dans un dossier à part, donc le chemin correct est :

                  <link rel="stylesheet" href="css/stylesheet.css" type="text/css" />

                  qui signifier : "regarde au même niveau que moi, ouvre le dossier CSS et va chercher à l'intérieur le fichier stylesheet.css". 

                  Et du coup tu as le même problème avec ton dossier de font. ;)

                  Plus de détails sur le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/creer-des-liens#/id/r-1609677

                  Et au niveau organisation, je ne mettrais pas les fonts dans le dossier CSS, pour moi le dossier CSS doit contenir du CSS et rien d'autre. Je mettrais plutôt mes fonts dans un dossier fonts sutué au m^me eniveau que le fichier HTML et le dossier CSS.

                  A éviter également les espaces dans les noms des dossiers (dossier "Web fonts" par exemple).

                  -
                  Edité par Mewen_bzh 14 décembre 2017 à 13:50:47

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Je ne réponds pas aux messages privés.
                    14 décembre 2017 à 14:00:22

                    J'ai fait le changement au niveau du code. Le navigateur, lui ne change toujours rien
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Jess

                      14 décembre 2017 à 14:13:28

                      Nouvelle erreur détectée : 

                      <link rel="stylesheet" href="css/stylesheet.css" type="text/css" />

                      Dans ta deuxième capture d'écran le fichier CSS semble se nommer en réalité style.css et non stylesheet.css.

                      Il existe bien un fichier CSS stylesheet.css mais qui se trouve dans css/cac_champagneregular_macroman/.

                      A toi de voir à quel fichier tu veux faire appel et à définir le bon chemin en conséquence... ;)

                      -
                      Edité par Mewen_bzh 14 décembre 2017 à 14:14:01

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Je ne réponds pas aux messages privés.
                        14 décembre 2017 à 14:49:01

                        Merci pour l'aide mais je crois que le navigateur n'a pas envie de faire son boulot aujourd'hui. De plus je viens de me rendre compte que la font n'avait pas été téléchargée sur l'ordi alors que j'ai suivi les instructions du cours à la lettre. Donc le pc ne risque pas de la trouver...

                        • Partager sur Facebook
                        • Partager sur Twitter

                        Jess

                        [css] changement et insertion de font

                        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                        × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                        • Editeur
                        • Markdown