[Résolu] Définir une taille de police en fonction d'une autre

Un petit truc qui peut intéresser plus d'un(e) et que j'ai découvert en cherchant sur le Net (https://stackoverflow.com/questions/15195209/how-to-get-font-size-in-html)

On peut avoir besoin de définir une taille de police en fonction d'une autre taille de police.

Par exemple, si un titre a une taille de police de 25px, on peut vouloir le rappeler quelque part en le réduisant de 15 % (ou en le diminuant de 3.75px).

Voici comment procéder :

1) Récupérer la taille de police du titre :

taille_de_police = window.getComputedStyle(monTitre, null).getPropertyValue("font-size");

2) Convertir la taille de police en nombre flottant, ce qui permet notamment d'éliminer l'unité (taille_de_police est une chaîne de caractères comprenant la valeur et l'unité) :

taille_de_police_convertie = parseFloat(taille_de_police);

3) Recopier le contenu du titre :

rappel_du_titre.innerHTML = monTitre.innerHTML;

4) Attribuer la taille de police désirée :

rappel_du_titre.style.fontSize = (taille_de_police_convertie * 0.85) + 'px';

ou

rappel_du_titre.style.fontSize = (taille_de_police_convertie - 3.75) + 'px';

Voili-voilà
Modifié par Beka (16 Oct 2018 - 15:45)

# Utilise la fonction CSS calc() avec une variable CSS :

* https://developer.mozilla.org/fr/docs/Web/CSS/Les_variables_CSS
* https://developer.mozilla.org/en-US/docs/Web/CSS/calc
* https://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html
Modifié par bazooka07 (17 Oct 2018 - 00:06)

Merci de l'info, Bazooka.

Heureux d'apprendre que le css permet maintenant de disposer de variables.

Mais, pour l'instant, j'oriente mon travail sur la seule partie dynamique (en JavaScript donc) en réalisant un prototype en lorem ipsum disposant d'une décoration très minimale.

Je garde toutefois l'info en mémoire lorsque j'aborderai la vraie mise en page.