Changement de police et taille des caractères

**popoy** · 10/06/2018, 13h31

Bonjour,
Je suis débutant en CSS, JavaScript et HTML.
Je ne sais pas si je suis sur le bon forum car mon code concerne CSS JavaScript et HTML.
J'aimerais créer des boutons de modifications des polices de caractères utilisées dans ma page web
ainsi que des boutons de modifications de la taille des caractères.
J'ai donc créer une page de test 001 Voici le contenu.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML><html>
    <meta charset="utf-8" />
    <title>001</title>
    <style type="text/css">
    html{color:#000;background:#FFF;}
    @font-face { font-family: Font1; src: url('file:/font1.ttf'); }
    @font-face { font-family: Font2; src: url('file:/font2.ttf'); }
    .divA{ font-family: Font1;}
    .divB{ font-family: Font2;}
</style>
</head>
<body>
<p><big style="font-weight: bold">Titre<br></big></p>
<p>Bonjour</p>
<input type="button" value="Appliquer la class CSS ‘divA’" onclick="javascript:document.body.className='divA';" /><br />
<input type="button" value="Appliquer la class CSS ‘divB’" onclick="javascript:document.body.className='divB';" /><br />
<input type="button" value="PLUS" onclick="javascript:document.body.style.fontSize='20';" /><br />
<input type="button" value="MOINS" onclick="javascript:document.body.style.fontSize='10';" /><br />
</body>
</html>

Le résultât est que les polices de caractères se change bien quand j'appuie sur Appliquer la class CSS ‘divA' ou Appliquer la class CSS ‘divB.
Cependant pas quand j'appuie sur PLUS et MOINS
Ce que je n'arrive pas a comprendre car
si je met le code suivant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
  <head>
    <meta charset="utf-8" />
    <title>002</title>
    <style type="text/css">
    html{color:#000;background:#FFF;}
   </style>
  </head>
  <body>
<p><big style="font-weight: bold">Titre</big></p>
<p>Bonjour</p>
<input type="button" value="PLUS" onclick="javascript:document.body.style.fontSize='20';" /><br />
<input type="button" value="MOINS" onclick="javascript:document.body.style.fontSize='10';" /><br />
</body>
</html>

Les boutons PLUS ET MOINS fonctionnent.
Merci d'avance de votre aide.

**psychadelic** · 10/06/2018, 14h02

il y a un piège en javascript, la valeur des font n'est pas affectée dans le dom (en tout cas sur FireFox)

et ton code ne prends pas en compte l'unité.

Le mieux c'est de régler ce genre de chose en css, et d'utiliser des tailles de police en unité em (ce qu'ils sont par défaut) ou rem selon le cas.
après il n'y a plus qu'a changer par un script la taille du ou des éléments de références.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="fr">
 
<head>
  <meta charset="UTF-8">
  <title>blocks couleurs</title>
  <style>
    html { font-size: 25px; }   /* => correspond ici au REM */
    body { font-size: 20px; }   
    
    div.REMclass { font-size: 1.2rem; }
    div.EM_class { font-size: 1.2em; }
  </style>
</head>
 
<body>
  <button id="plus">plus</button>
  <button id="moins">moins</button>
 
  <h1>texte h1</h1>
  <h3>texte h3</h3>
  <h5>texte h5</h5>
  <hr/>
  <p>paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe </p>
 
  <div class="REMclass"> Div en 1.2 rem</div>
  <div class="EM_class"> Div en 1.2 em</div>
 
  <script>
    if (document.body.style.fontSize == "") {
      document.body.style.fontSize = "20px";
    }
    
    document.getElementById('plus').onclick = function() {
      let Sz = parseInt(document.body.style.fontSize);
      Sz++;
      document.body.style.fontSize = Sz+'px';
    };
 
    document.getElementById('moins').onclick = function() {
      let Sz = parseInt(document.body.style.fontSize);
      Sz--;
      document.body.style.fontSize = Sz+'px';
    };
  </script>
</body>
</html>

**NoSmoking** · 10/06/2018, 15h11

Bonjour,
la différence ce fait sur la première ligne de tes codes HTML.

Sur le HTML source un il y a un <!DOCTYPE HTML> pas sur le HTML source deux et donc dans ce dernier cas le rendu est en mode « quirks » ce qui veut dire, en autres, que ton fontSize="20" est interprété comme fontSize="20px" voilà pourquoi cela fonctionne dans ce cas.

Dans le HTML source un en absence d'unité la propriété est purement et simplement ignorée.

Nota 1 : inutile de préciser javascript: sur un événement onclick celui-ci attendant quoiqu'il arrive une fonction script.
Nota 2 : un <input type="button" peut-être remplacé par un <button.

Donc autant mettre

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button onclick="document.body.style.fontSize='20px';">PLUS</button>

**popoy** · 10/06/2018, 16h08

Merci @psychadelic et @NoSmoking de votre réponse aussi rapide.
Je ne pensais pas que l'absence d'unité pouvez avoir une importance vue que le deuxième code fonctionner.
J'aurais pu chercher bien longtemps.
Problème résolu.
Merci encore.

Changement de police et taille des caractères

JavaScript

Discussions similaires

Partager

Partager